Components

Radio

Overview

Overview

When to use

Use the radios component when users can only select one option from a list.

When not to use

Do not use the radio component if users might need to select more than one option. In this case, you should use the checkboxes component instead.

Principles

Radio buttons always have a minimum of two options.

Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Make the label clickable. Users should be able to click on either the text label or the radio button to select or deselect an option.

Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, ‘Select one option’.

Do not pre-select radio options as this makes it more likely that users will:

• not realise they’ve missed a question
• submit the wrong answer

Size

Regular should be used in most cases. Compact could be used for example in large and dense data tables.

Regular size

Compact size

Inline state

Hint text

Hint text can be added to the legend and also to individual radios.

Required indicator

Single line legend

Multiple line legend

Error messages

Disabled state

Use this state when the user doesn’t have permission to edit the field.

Usage

Usage guidelines

Single option

Do not use for “accepting terms of service” and similar functionality. Use a checkbox instead.

Do

Don't

Inline radios

Inline stacking may be used for two options with short labels. If you have more that two options and/or longer labels, use vertical stacking instead.

Do

Do

Don't

Accessibility

Keyboard

Radios are native input type="radio" elements that share a name:

• Tab moves into the group, landing on the checked radio, or the first one if none is checked. Tab again leaves the group.
• Arrow Down / Arrow Right and Arrow Up / Arrow Left move to the next or previous radio and check it.
• Space checks the focused radio if it is not yet checked.

Screen readers

Each radio is labelled by its label (for/id) and announced with its position ("2 of 4"). The group is a fieldset named by its legend, with the group hint and error referenced from aria-describedby. Per-item hints and errors are linked to their radio the same way. In the error state the radios carry aria-invalid="true".

Using the example

• Ids must be unique per instance. The template derives option, hint and error ids from the group id; hand-written copies must too.
• Every radio needs a visible label. Unlike the checkbox, the template has no aria-label fallback.
• Keep one question per fieldset, and put the question in the legend, not in a heading before it.
• The required asterisk is visual only; add required to one radio of the group, or aria-required="true" on a role="radiogroup" wrapper.

Known limits

Sub-options share the name of their column, so they belong to the same radio group as the main options. Arrow keys move across main and sub-options alike, and checking a sub-option unchecks its parent. If the sub-options answer a separate follow-up question, give them their own name and fieldset in your copy.