Swatch picker
Colour choices as radio squares; the chosen one gets a two-ring halo.
Examples
Swatch picker
Anatomy
.swatch-group | A wrapping row of swatches. |
> label | One square per colour, filled with its --swatch. |
label > input[type=radio] | Covers the square, invisible. All share a name. |
label > span.sr-only | The colour's name, as the radio's accessible name. |
API
| Attribute | Values | Description |
|---|---|---|
--swatch | <colour> | On each label: the colour of its square. |
checked | boolean | On one radio: draws a background-coloured gap and a text-coloured ring around its square. |
Accessibility
- Every swatch needs its colour named in
span.sr-only; the square alone says nothing to a screen reader. - Name the group: wrap it in a
<fieldset>with a<legend>, or addrole="radiogroup"and anaria-label. - Selection is shown by the rings, not by colour, so it reads on any swatch.
| Key | Effect |
|---|---|
| ← / → | Moves the selection to the previous or next colour. |