# Swatch picker · MIAN

Pick a colour (or any visual option) from round swatches. Real radio buttons underneath.

- Id: `swatch-picker` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/swatch-picker
- Use for: colour picker, product colour options, variant swatches, theme colour choice.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Colours

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/swatch-picker/source