Color Picker

The Color Picker component allows users to select a color from predefined options or optionally provide a custom value.

Usage & Examples

Default

Choose a color
default.tsx
<ColorPicker 
  colors={[
    { label: "Red", value: "#e63946" },
    { label: "Green", value: "#2a9d8f" },
    { label: "Blue", value: "#457b9d" },
    { label: "Yellow", value: "#f4a261" },
  ]}
  selected={selected}
  onChange={setSelected}
/>

Props API

22 props
Columns
Color Picker props API
Default
Description
allowCustombooleanNopropsfalseIf true, allows picking a custom color via a color input.
aria-describedbystringNoaria—References one or more elements that describe the group. This will be merged with helperText / errorText IDs when provided.
aria-labelstringNoaria—Accessible name for the group when no visible label should be used or when a more descriptive label is needed.
aria-labelledbystringNoaria—References an external element that labels the group. Prefer this when the visible label exists outside the component.
classNamestringNostyling—Custom class name for the component container.
colorsColorOption[]Yesprops—Array of color options to choose from.
customInputAriaLabelstringNoprops"Custom color picker"Optional label for the custom color input.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseWhether the entire picker is disabled.
errorTextstringNoprops—Optional error message shown when invalid.
helperTextstringNoprops—Optional helper text shown below or associated with the picker.
hideLabelbooleanNopropsfalseHide the visible legend visually while preserving it for screen readers.