Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProChoose one color from a palette: a radio group of swatches with arrow-key navigation across rows, color names for screen readers, a check mark that stays readable on any swatch, and value matching that ignores hex case and length.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Give every swatch a name: people using a screen reader hear "Red", not "#ef4444". Selection is by color value, so #F00, #ff0000 and red are the same swatch.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | (string | { value, name? })[] | - | The palette. |
value / onChange | string | null / (value) => void | - | The selected color. |
label | string | - | Accessible name of the group. |
columns | number | one wrapping row | Up and Down keys move by this many. |
size, shape | sm md lg, square circle | md, circle | |
disabled | boolean |
radiogroup of role="radio" buttons with aria-checked, following the radio pattern: one tab stop (the selected swatch, or the first), Arrow keys move and select, Home and End jump to the ends, and the keys flip in right-to-left pages.aria-label and as a tooltip. The selected swatch shows a check mark and a ring (not color alone), and the check is black or white by luminance so it is visible on every color.The component ships with a Testing Library test (color-swatch-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.