# Color swatches

> Pick one color from a preset palette, on native radio buttons.

## Anatomy

A `<fieldset class="color-swatches">` holds one radio per color. Each radio shows as a round chip of its color, so Tab, the arrow keys and form submission keep their native behavior.

Put each radio in a `<label>` whose visually hidden text, such as "Purple", comes before the radio, and set `--md-comp-color-swatch-color` on the radio. The checked swatch gets a ring, so the choice does not depend on telling two colors apart.

Label color PurpleGreenRedBlueAmber

```
<fieldset class="color-swatches">
  <legend>Label color</legend>
  <label><span class="visually-hidden">Purple</span><input type="radio" name="label-color"
    value="#6750a4" style="--md-comp-color-swatch-color: #6750a4" checked></label>
  <label><span class="visually-hidden">Green</span><input type="radio" name="label-color"
    value="#386a20" style="--md-comp-color-swatch-color: #386a20"></label>
  <label><span class="visually-hidden">Red</span><input type="radio" name="label-color"
    value="#b3261e" style="--md-comp-color-swatch-color: #b3261e"></label>
</fieldset>
```

## Custom color

Add an `<input type="color">` at the end of the group for a value outside the palette. It opens the browser's own picker and already shows as a matching round swatch. Give it its own `name` and its own label.

Theme color PurpleGreenRed Custom color

```
<fieldset class="color-swatches">
  <legend>Theme color</legend>
  <label><span class="visually-hidden">Purple</span><input type="radio" name="theme"
    value="#6750a4" style="--md-comp-color-swatch-color: #6750a4" checked></label>
  <label><span class="visually-hidden">Green</span><input type="radio" name="theme"
    value="#386a20" style="--md-comp-color-swatch-color: #386a20"></label>
  <label><span class="visually-hidden">Custom color</span><input type="color" name="theme-custom"
    value="#ff8800"></label>
</fieldset>
```

## Tokens

Override these on the `.color-swatches`. Set the swatch color on each radio.

| Token | Default |
| --- | --- |
| `--md-comp-color-swatch-color` | transparent; set it on each radio |
| `--md-comp-color-swatches-size` | 40px |
| `--md-comp-color-swatches-outline-color` | `--md-sys-color-outline` |
| `--md-comp-color-swatches-selected-color` | `--md-sys-color-on-surface` |