#Color Swatches

Expresses a finite, named color set with native radio or checkbox inputs and keeps selection understandable beyond hue alone.

npm install @a3s-lab/ui

<fieldset class="color-swatches" aria-label="Accent color">
  <label><input type="radio" name="accent" checked aria-label="A3S Blue" /><span data-swatch style="--swatch-color:#1456f0"></span></label><label><input type="radio" name="accent" aria-label="Violet" /><span data-swatch style="--swatch-color:#5b57d9"></span></label>
</fieldset>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<fieldset class="color-swatches" aria-label="Accent color">
  <label><input type="radio" name="accent" checked aria-label="A3S Blue" /><span data-swatch style="--swatch-color:#1456f0"></span></label><label><input type="radio" name="accent" aria-label="Violet" /><span data-swatch style="--swatch-color:#5b57d9"></span></label>
</fieldset>

#Contract

#Product boundary

It is not an arbitrary color picker, theme preview, or a substitute for text status. Free-form color work belongs in a host-owned specialist tool.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Every swatch needs an accessible name. Selection combines an outline with native input state so people never need to identify a color by sight alone.