ColorInput component supports Input and Input.Wrapper components features and all
input element props.
ColorInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
Component supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for hexa, rgba and hsla formats:
To disable free input set
You can add any amount of predefined color swatches:
By default, there will be 10 swatches per row, you can change this with
like in ColorPicker component:
If you need to restrict color picking to certain colors – disable color picker and disallow free input:
By default, if EyeDropper API
is available, eye dropper icon will be displayed at the right section of the input.
To disable it, set
Component Styles API
Hover over selectors to highlight corresponding elements
ColorInput is used without
label prop, it will not be announced properly by screen reader:
aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:
label prop is set, input will be accessible it is not required to set