A panel to pick a color. Drag in the square for the saturation and the brightness, use the bar for the hue, or type the hex code. For a field that opens this panel in a popover, see Color Input.
Start with a color using initialValue, and name the group with aria-label.
swatches adds colors to pick with one click, like the ones a team already uses.
Use value and onChange to keep the color in your own state, for example to show a preview or to reset it.
A disabled picker shows the color and cannot change it.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | the color, to control the component | string | '#rrggbb', '#rgb' | - |
| initialValue | the color on the first render | string | '#rrggbb', '#rgb' | #000000 |
| onChange | called with the color as #rrggbb in lowercase | (hex: string) => void | - | - |
| swatches | colors to pick with one click | string[] | - | - |
| hexInput | show the field for the hex code | boolean | - | true |
| disabled | disable the component | boolean | - | false |
| panelLabel | name of the square, for screen readers | string | - | Saturation and brightness |
| hueLabel | name of the hue bar | string | - | Hue |
| hexLabel | name of the hex field | string | - | Hex color |
| ... | native props, passed to the root div | HTMLAttributes | 'aria-label', 'id', ... | - |
The field changes the color as soon as it holds six digits, with or without the #. A short code like #abc is read when the field loses the focus, and becomes #aabbcc. Any other text is dropped on blur, and the field goes back to the current color.
The ref points at the root div.
The square is a slider named by panelLabel, whose value reads like "40% saturation, 80% brightness". With the focus on it, Left and Right change the saturation and Up and Down the brightness, by 1%, or by 10% with Shift. The hue bar is a native range input, and the swatches are buttons named by their code, with aria-pressed on the one in use. The color is never conveyed by the swatch alone, because the hex code is also a text.