Radio button

Radio buttons let users choose one option from a list.

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


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

  • Interactive demo - Sainsbury's


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


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 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.
Select a theme to demo: