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" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />

Visual variants

Sizes

xs
Choose a color
small
Choose a color
medium
Choose a color
large
Choose a color

Shadows

none
Choose a color
light
Choose a color
strong
Choose a color
visual-variants.tsx
// Sizes
<ColorPicker size="xs" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />
<ColorPicker size="small" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />
<ColorPicker size="medium" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />
<ColorPicker size="large" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />

// Shadows
<ColorPicker shadow="none" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />
<ColorPicker shadow="light" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />
<ColorPicker shadow="strong" 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={setSelected}
  />

Interaction states

Disabled
Choose a color
interaction-states.tsx
// Disabled
<ColorPicker disabled 
    colors={[
      { label: "Red", value: "#e63946" },
      { label: "Green", value: "#2a9d8f" },
      { label: "Blue", value: "#457b9d" },
      { label: "Yellow", value: "#f4a261" },
    ]}
    value={selected}
    onValueChange={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.
errorMessagestringNoprops—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.