Color Picker

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

Usage

Default

Choose a color

RedGreenBlueYellow

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

Props

Data table
	Type	Description
allowCustom	boolean	If true, allows picking a custom color via a color input.
aria-describedby	string	References one or more elements that describe the group. This will be merged with helperText / errorText IDs when provided.
aria-label	string	Accessible name for the group when no visible label should be used or when a more descriptive label is needed.
aria-labelledby	string	References an external element that labels the group. Prefer this when the visible label exists outside the component.
className	string	Custom class name for the component container.
colors	ColorOption[]	Array of color options to choose from.
customInputAriaLabel	string	Optional label for the custom color input.
data-testid	string	Optional test ID for testing frameworks.
disabled	boolean	Whether the entire picker is disabled.
errorText	string	Optional error message shown when invalid.
helperText	string	Optional helper text shown below or associated with the picker.
hideLabel	boolean	Hide the visible legend visually while preserving it for screen readers.
invalid	boolean	Marks the group as invalid.
label	string	Optional visible label above the color group.
name	string	Optional name attribute for the radio group.
onChange	(color: string) => void	Callback triggered when a color is selected.
required	boolean	Marks the group as required.
selected	string	Currently selected color value.
shadow	ShadowType	Applies a shadow effect to the swatches ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
shape	ShapeType	Shape of the swatches ('square' \| 'round' \| 'pill').
size	SizeType	Size of the swatches ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').