CynosureComponents / Controls
ColorSwatches
A palette of colours to choose from: brand colours, presets or recent colours.
When to useLink to "When to use"
- A short list of colours people pick from, alone or next to a full picker.
Use something else when:
- any colour is allowed: ColorField, which shows swatches in its picker with its
swatchesprop
UsageLink to "Usage"
tsx
import { ColorSwatches } from "@arshad-shah/cynosure";
<ColorSwatches label="Brand colours" swatches={brand} value={colour} onChange={setColour} />Swatches are any CSS colours, as strings or { value, label }. Give brand colours a label so screen readers say "Ember" rather than "rgb(194 65 12)". Keep recent colours in your own state or storage and pass them in.
The chosen colour is matched by colour, not spelling, so #1D1B18 selects an rgb(29 27 24) swatch.
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
labelRequired | Accessible name of the group, e.g. "Recent colours". | string | |
swatchesRequired | The colours to offer: a CSS colour, or { value, label } to give it a spoken name. | (string | ColorSwatch)[] | |
onChangeRequired | Called when a swatch is chosen (pressed, or reached with the arrow keys), with that swatch's value. | (value: string) => void | |
value | The chosen colour, matched by colour (so "#FFF" and "white" are the same swatch). | string | |
disabled | No swatch can be chosen. | boolean | |
size | Size of each swatch. Default "md". | Size | "md" |
className | Added to the root element, for layout. | string | |
style | Layout only. Restyle through --cy-color-swatches-* tokens. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
- Role: a radio group named by
label; each swatch is a radio named by its label or value. - Keyboard: one tab stop; arrow keys move and choose (once a colour is chosen), Home and End jump.
- Visibility: each swatch has a hairline so pale colours stand out from the page; transparent colours sit over a checkerboard; the chosen one has a ring and a tick that contrasts with it.
- Touch: 44px hit areas on touch screens (24px with a mouse).
ThemingLink to "Theming"
Tokens: --cy-color-swatches-size and --cy-color-swatches-radius.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.