Radio

Stable

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.

Charge

Flat monthly fee Per unit per month

---

Specifications

LightDark

Anatomy

Charge

Flat monthly fee Per unit per month

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

Flat monthly fee

Radio

18px by 18px

Spacing

radio to label: var(--at-space-3) /* 8px */

between options: var(--at-space-3) /* 8px */

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.

LightDark

Example

Read frequency

Monthly Quarterly Yearly

States

Unselected

Monthly

browser default circle

Selected

Monthly

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

Focus

Monthly

outline: 3px solid var(--at-border-focus)

outline-offset: 2px

Disabled

Monthly

greyed by the browser

---

Usage

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

Read frequency

Monthly Quarterly

DoA legend that asks the question, options in order.

Monthly Quarterly

Don'tNo legend, and different names, so both can be selected.

Do

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

Don't

• Use a single radio on its own.

---

Implementation

HTML

Copy

<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 used

--at-bg-primary

---

Accessibility

• Give every radio in a group the same name.

Related

Checkbox

Turn one option on or off, or pick several from a list.

View component

Select

Choose one option from a list of more than about five.

View component

Field: label, hint and error

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

View component