ColorPicker

The ColorPicker input allows a user to select any color either from a manual entry or from an interactive gradient. The ColorPicker component supports manual inputs of RGB, HSL, and hexadecimal format.

For more information on how to use the features and props for this component, check out the developer documentation.

The ColorPicker component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.

It can also be set to display the input inline with its label, as well as rendering only the color swatch rather than the entire input when swatchOnly is provided. If alpha is provided, there will be an additional slider rendered for opacity.

NameTypeDefaultDescription
label*ReactNodelabel for the color picker control
alphabooleanfalse Enables alpha slider.
classNamestringAdditional CSS classes.
disabledbooleanDisable the control.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not passed, a random id will be generated for any render.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
inlinebooleanLayout field elements inline in a row.
labelHiddenbooleanVisually hides the label region.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onBeforeClose() => voidonBeforeClose of the color picker
onChangeColorChangeHandleronChange event handler that gets called on change of value.
onClickMouseEventHandler<HTMLInputElement>Called when the underlying input element is clicked. This should be rarely if ever used.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
refRef<HTMLInputElement>Ref placed on the input element.
requiredbooleanIndicate if the field is required. The browser defaults to false.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
swatchOnlybooleanfalse Show color swatch without hex value display.
valuestring"#000000" Color picker value in hex