Radio

Preview

When to use

Use radio buttons when the user must choose exactly one option from a small set of mutually exclusive choices. Best suited for:

• Selecting a delivery method, payment type, or plan.
• Any choice where selecting one option deselects all others.
• Groups of 2–6 options where all options should be visible without interaction.
• Binary questions where the user is making a choice (for example “Vill du ha kvitto? Ja / Nej”).

When not to use

• Don't use radio buttons when the user can select more than one option — use Checkbox.
• Avoid radio buttons for more than 6–8 options where the list becomes hard to scan — use a Select dropdown.
• Don't use a single radio button in isolation; a single option that can be toggled is better handled by a Switch or Checkbox.
• Don’t use radio buttons for an on/off setting that should take effect immediately — use a Switch.

Behaviour

Selecting one radio option deselects any other currently selected option in the group. Once an option is selected, it cannot be deselected by clicking it again — the group always has one option selected unless no default is set.

A radio option can expand to reveal additional input (e.g., a text field for a custom value) when selected. The expanded content is only accessible after the option is selected.

Anatomy

• Group label — text above the radio group that names the choice being made (e.g., "Delivery method"). Corresponds to the <legend> in a <fieldset>.
• Radio indicator — the circular control. Hollow when unselected, filled with a centre dot when selected.
• Label — the text for each option. Clicking the label also selects the radio.
• Description (optional) — secondary text below the option label for additional context.
• Expanded slot (optional) — additional content (e.g., a text input) that appears below the selected option.
• Validation message — appears below the group when a selection is required but not made.

Variants

• Inline — a simple list of radio options with a label per option. Use for straightforward single-select choices.
• Card — each radio option is presented inside a card container. The entire card is the tap/click target. Use when options need more visual emphasis or contain richer content (image, description, price).
• With expanded slot — a radio option that, when selected, reveals an additional input area below it. Use for "Other — please specify" patterns or conditional input.

States

• Default (unselected) — the radio indicator is empty.
• Selected — the indicator is filled with a centre dot.
• Hover — the indicator and label highlight when the cursor moves over the option.
• Focus — a visible focus ring appears on the indicator when navigated via keyboard.
• Disabled — the option is non-interactive and visually reduced. Can be selected or unselected.
• Error — a validation message appears below the group when no selection has been made for a required field.

Placement & layout

Stack radio options vertically within a group. Horizontal layouts are acceptable for 2–3 short options where space is limited, but vertical lists are generally easier to scan.

The group label sits above all options. Validation messages sit below the last option.

In a card radio group, all cards in the group use the same width. Maintain consistent spacing between cards.

Accessibility

• The radio group must be wrapped in a <fieldset> with a <legend> that names the group. This is the accessible group label read by screen readers.
• Keyboard navigation:
  • Tab moves focus to the radio group (specifically, to the currently selected or first option).
  • Arrow keys (Up / Down or Left / Right) move between options within the group and select them.
  • Tab moves focus out of the group.
• Each radio option must have an associated <label>.
• Error messages for the group should be associated via aria-describedby on the group element.

Related components

• Checkbox — for multi-select.
• Select — for long lists of options in a compact dropdown.
• Switch — for binary on/off choices that take immediate effect.