Capture color from user
ColorInput component supports Input and Input.Wrapper component features and all input element props. The ColorInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right' . This is useful for async operations like API calls, searches, or validations:
The component supports hex, hexa, rgb, rgba, hsl and hsla color formats. The slider to change opacity is displayed only for hexa, rgba and hsla formats:
By default, ColorInput will revert the value on blur to the last known valid value. To change this behavior and keep the invalid value, set fixOnBlur={false} :
onChangeEnd is called when the user stops dragging the slider or changes the input value. It is useful when you need to update the color only when the user has finished interacting with the component:
Change end value: #FFFFFF
To disable free input, set the disallowInput prop:
You can add any amount of predefined color swatches:
By default, there will be 7 swatches per row. You can change this with the swatchesPerRow prop, like in the ColorPicker component:
If you need to restrict color picking to certain colors – disable the color picker, disallow free input and hide the eye dropper:
To close the dropdown when one of the color swatches is clicked, set the closeOnColorSwatchClick prop:
To hide the dropdown, set withPicker={false} :
By default, if the EyeDropper API is available, the eye dropper icon will be displayed at the right section of the input. To disable it, set withEyeDropper={false} :
You can replace the eye dropper icon with any React node using the eyeDropperIcon prop:
ColorInput supports leftSection and rightSection props. These sections are rendered with absolute positioning 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:
Note that by default, ColorPicker has a color preview in the left section and an eye dropper button in the right section. You can replace these elements with any React node using the leftSection and rightSection props:
ColorInput supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
If ColorInput is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :