Radio button

How to use radio buttons

Use radio buttons when users must make a single selection from a group of mutually exclusive choices.

When using radio buttons:

Make each radio button dependent on each other, so selecting one radio button should change the status of another one in the list
List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
Have a default option selected wherever possible
Always have a unique visible label attached to each radio button
Visually position your label to the right of the radio button
Programmatically connect each label to its corresponding radio button

If users need to choose more than one option, use a checkbox instead.

If users need to turn something on or off, use a switch instead.

Types of radio buttons

Stacked

Use stacked radio buttons if there are more than 3 options for the user to choose from.

Interactive demo - Sainsbury's

Inline

Use inline radio buttons if there are fewer than 3 options for the user to choose from and the radio button labels are short.

Interactive demo - Sainsbury's

Outlined

Use outlined radio buttons to give the options more visual impact and distinction.

Interactive demo - Sainsbury's

Interactive demo - Sainsbury's

With error message

Make sure the error message is announced to screen reader users when it is triggered.

Interactive demo - Sainsbury's

Standalone

Standalone radio buttons let you remove text for more flexibility with the position of the radio button. Make sure that context is provided to the user by the surrounding content of the radio button and that the radio button has an accessible name.

Interactive demo - Sainsbury's

Copy guidelines

When using radio buttons:

They should be introduced by a clear heading
Start your radio button labels with a capital letter
Don't use commas or any punctuation at the end of each label
Don't use more than three words per label

Was this page helpful?

Get in touch

Our team can answer any questions about using radio buttons or give you a helping hand with your next project.

Email

Microsoft Teams

Slack