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
Stacked
Use stacked radio buttons if there are more than 3 options for the user to choose from.
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.
Outlined
Use outlined radio buttons to give the options more visual impact and distinction.
With error message
Make sure the error message is announced to screen reader users when it is triggered.
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.
Content 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