Color Swatch
A circular color picker built on a native
<input type="radio"> or
<input type="checkbox">. Color alone never
conveys meaning to screen reader users, so every swatch needs an
aria-label naming the color.
Default
Set the color with the --swatch-color custom property
on each <input>, nested inside a
<fieldset role="group" class="color-swatch">.
Pass the color name via aria-label on each input since
there's no visible text.
<fieldset role="group" class="color-swatch">
<input
type="radio"
name="color"
style="--swatch-color: royalblue"
aria-label="Blue"
/>
<input
type="radio"
name="color"
style="--swatch-color: crimson"
aria-label="Red"
checked
/>
</fieldset>Checkbox (multi-select)
Use type="checkbox" instead of radio to
let multiple swatches be selected at once.
<fieldset role="group" class="color-swatch">
<input
type="checkbox"
style="--swatch-color: royalblue"
aria-label="Blue"
checked
/>
</fieldset>Non-selectable
When a swatch is just showing a color, not selecting one, use a
plain <span> instead of an input. It's marked
role="img" with an aria-label so it still
announces the color name, without implying it's interactive.
<span
class="color-swatch"
role="img"
aria-label="Blue"
style="--swatch-color: royalblue"
></span>Disabled
<fieldset role="group" class="color-swatch" disabled>
<input
type="radio"
name="color"
style="--swatch-color: royalblue"
aria-label="Blue"
/>
</fieldset>