# Radio

One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.

Kit part · Free · https://tactileui.dev/parts/radio

- Element: `<input type="radio">`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Radio groups
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Stacked

```html
<div style="display:grid;gap:10px"><label class="tui-choice"><input type="radio" class="tui-radio" name="v-r1" checked> Mono</label><label class="tui-choice"><input type="radio" class="tui-radio" name="v-r1"> Stereo</label></div>
```

### In a row

```html
<div style="display:flex;gap:18px"><label class="tui-choice"><input type="radio" class="tui-radio" name="v-r2" checked> 44.1</label><label class="tui-choice"><input type="radio" class="tui-radio" name="v-r2"> 48</label><label class="tui-choice"><input type="radio" class="tui-radio" name="v-r2"> 96</label></div>
```

## Every state

- Off
- On
- Focus

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-radio | class | on | An 18px round key. Checked: pressed, with a printed dot. |
| .tui-choice | class | on | The key and its words, 8px apart. |
| name · value · checked | attribute | — | Native: one name per group; the form posts the checked value. |
| · | element | — | Groups the radios and names the group. |
| change | event | — | Native, on the radio that became checked. |
| Arrows | keyboard | — | Move the choice within the group. |

## Markup

```html
<fieldset>
  <legend class="tui-label">Channels</legend>
  <label class="tui-choice"><input type="radio" class="tui-radio" name="ch" value="mono" checked> Mono</label>
  <label class="tui-choice"><input type="radio" class="tui-radio" name="ch" value="stereo"> Stereo</label>
</fieldset>
```

The demo on the page:

```html
<fieldset style="border:0;padding:0;margin:0;display:grid;gap:14px"><legend class="tui-label" style="margin-bottom:12px">Channels</legend>
  <label class="tui-choice"><input type="radio" class="tui-radio" name="demo-ch" checked> Mono</label>
  <label class="tui-choice"><input type="radio" class="tui-radio" name="demo-ch"> Stereo</label>
  <label class="tui-choice"><input type="radio" class="tui-radio" name="demo-ch"> Mid/side</label>
</fieldset>
```

## Usage notes

Tab into the group once; the arrow keys move the choice.

## Accessibility

- Group radios in a `<fieldset>` with a `<legend>`; screen readers then read “Channels, Mono, radio, 1 of 3”.
- One Tab stop for the group; arrows move the choice.
- For a machine’s mode or a view filter, the [selector](https://tactileui.dev/parts/selector) is the same radio group, drawn as latching keys.

## How it’s built

A native radio with `appearance: none`: the same small skirted key as the check, with a round cap. Chosen, it drops 1.5px under the pressed light and prints a dot, an `::after` circle in `--tui-ink`.

## Rules

Radios sit under a legend that names the group; past five choices, a select reads better.

The full rules are in `choice.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.