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:
ColorInput will revert the value on blur to the last known valid value.
To change this behavior and keep invalid value, set
onChangeEnd is called when user stops dragging slider or changes input value.
It is useful when you need to update color only when user finished interaction with the component:
Change end value: #FFFFFF
To disable free input set
You can add any amount of predefined color swatches:
By default, there will be 7 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:
To close the dropdown when one of the color swatches is clicked, set
To hide dropdown, set
By default, if EyeDropper API
is available, eye dropper icon will be displayed at the right section of the input.
To disable it, set
You can replace eye dropper icon with any React node using
rightSection props. These sections are rendered with absolute position inside the input wrapper. You can use them to display icons, input controls or any other elements.
You can use the following props to control sections styles and content:
leftSection– React node to render on the corresponding side of input
leftSectionWidth– controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component
pointer-eventsproperty of the section. By default, all pointer events are enabled. If you want to render a non-interactive element, set it to
noneto pass clicks through to the input.
Note that by default,
ColorPicker has color preview in the left section and eye dropper button
in the right section. You can replace these elements with any React node using
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