ColorPicker
Interactive color selection widget with saturation/lightness area, hue and alpha sliders
Category: inputs · WCAG 2.2-AA · color, input, form, picker, hue, alpha
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
labels | ColorPickerLabels | — | Overrides for the component’s user-visible strings (i18n). |
value | string | — | Controlled hex color value |
defaultValue | string | #3b82f6 | The initial value when uncontrolled. |
onValueChange | (value: string) => void | — | Called with the new value when it changes. |
presets | string[] | — | Preset swatch colors |
alpha | boolean | true | When true, enables alpha (opacity) selection. |
label | string | — | Text label for the control. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-color-accent--cascivo-color-surface--cascivo-color-border--cascivo-color-border-strong--cascivo-radius-md--cascivo-radius-full--cascivo-focus-ring
When to use
- Letting a user choose an arbitrary color via a visual saturation/lightness area plus hue control
- Brand or theme customization UIs where an exact color value (hex) is captured
- Forms that need an optional alpha channel alongside the color
When not to use
- Choosing from a small fixed palette only — use a swatch RadioGroup instead
- A single accent toggle where a few preset chips suffice
How to build an accessible ColorPicker in React →
Examples
Basic
<ColorPicker defaultValue="#3b82f6" onValueChange={setColor} />With presets
<ColorPicker presets={["#ef4444", "#3b82f6", "#10b981"]} alpha={false} />