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.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/color-swatch.css" />

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>

API reference

Type	Classes / attributes	What it does
Color	`--swatch-color: var(--ui-color4-500)`	Fill color of the swatch
Disabled	`[disabled]`	Blocks the swatch and fades it