Swatch picker
Pick a colour (or any visual option) from round swatches. Real radio buttons underneath.
Colours
<fieldset class="mn-swatches">
<legend>Colour</legend>
<label class="mn-swatch-option" style="--sw:#0a0a0a"><input type="radio" name="sw-1" aria-label="Ink" checked></label>
<label class="mn-swatch-option" style="--sw:#e5e5e5"><input type="radio" name="sw-1" aria-label="Flour"></label>
<label class="mn-swatch-option" style="--sw:#c8102e"><input type="radio" name="sw-1" aria-label="Chilli"></label>
<label class="mn-swatch-option" style="--sw:#1f3fa6"><input type="radio" name="sw-1" aria-label="Porcelain"></label>
<label class="mn-swatch-option" style="--sw:#3f6212"><input type="radio" name="sw-1" aria-label="Scallion"></label>
<label class="mn-swatch-option" style="--sw:#d97706"><input type="radio" name="sw-1" aria-label="Pumpkin"></label>
</fieldset>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/swatch-picker.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-swatches | A fieldset of options. |
| mn-swatch-option | A label with a radio inside; set --sw to its colour. |
| mn-swatches-sm · mn-swatches-square | Smaller or square swatches. |
Accessibility
- Each radio needs an accessible name (aria-label), colour alone is not a name.
- Arrow keys move between options, as with any radio group; focus shows a ring.