# Radio

Status: stable

Pick exactly one option from a short list.

Radios let managers pick exactly one option from a short list, with every option visible. Use them for five or fewer options. A group of radios sits in a fieldset with a legend that asks the question, and every radio in the group shares one name.

Atrium uses the browser's own radio, tinted with the accent colour. It has no separate hover style.

## Example

```html
<fieldset class="at-fieldset"><legend>Charge</legend><label class="at-choice"><input type="radio" name="d-charge" checked /> Flat monthly fee</label><label class="at-choice"><input type="radio" name="d-charge" /> Per unit per month</label></fieldset>
```

## Anatomy

1. **Legend**: font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold)

2. **Radio**: width: 1.125rem; height: 1.125rem /* 18px */; accent-color: var(--at-bg-primary)

3. **Label**: font-size: var(--at-text-md) /* 16px */; the whole label is clickable

## Size and spacing

- **Radio**: 18px by 18px

- **Spacing**: radio to label: var(--at-space-3) /* 8px */; between options: var(--at-space-3) /* 8px */

## Variants

### Radio group

Pre-select the most common answer if there is a safe default. Otherwise leave all unselected and check one was chosen on save.

```html
<fieldset class="at-fieldset"><legend>Read frequency</legend><label class="at-choice"><input type="radio" name="v-freq" checked /> Monthly</label><label class="at-choice"><input type="radio" name="v-freq" /> Quarterly</label><label class="at-choice"><input type="radio" name="v-freq" /> Yearly</label></fieldset>
```

| State | Specification |

|---|---|

| Unselected | browser default circle |

| Selected | dot: var(--at-bg-primary) |

| Focus | outline: 3px solid var(--at-border-focus); outline-offset: 2px |

| Disabled | greyed by the browser |

## When to use

- Exactly one choice from five or fewer options.

## When not to use

- More than about five options: use a select.
- Several choices: use checkboxes.
- A single on or off option: use a checkbox.

## Content

- Order options logically: smallest to largest, or most common first.
- Keep each label short and parallel: "Monthly", "Quarterly", "Yearly".

## Do and don't

Do: A legend that asks the question, options in order.

```html
<fieldset class="at-fieldset"><legend>Read frequency</legend><label class="at-choice"><input type="radio" name="dd-r1" checked /> Monthly</label><label class="at-choice"><input type="radio" name="dd-r1" /> Quarterly</label></fieldset>
```

Don't: No legend, and different names, so both can be selected.

```html
<div class="at-stack at-stack--tight"><label class="at-choice"><input type="radio" name="dd-r2" /> Monthly</label><label class="at-choice"><input type="radio" name="dd-r3" /> Quarterly</label></div>
```

## Do

- Pre-select the most common option when it is safe to.

## Don't

- Use a single radio on its own.

## Code

```html
<fieldset class="at-fieldset">
  <legend>Charge</legend>
  <label class="at-choice"><input type="radio" name="charge" checked /> Flat monthly fee</label>
  <label class="at-choice"><input type="radio" name="charge" /> Per unit per month</label>
</fieldset>
```

## Classes

| Class | What it does |

|---|---|

| `at-fieldset` | Groups the options |

| `at-choice` | One option |

## Tokens

`--at-bg-primary`

## Accessibility

- Give every radio in a group the same name.