Overview

Radio

Radios enable users to select a single option from a list of mutually exclusive choices. We commonly use them in forms, data tables, dialogs, and lists.

Radio

Usage

When to use
Use radios when there are a list of mutually exclusive options and the user must select one. When the user chooses a new item, the previous choice is automatically deselected.
Radio types
Usage
Without container
In most cases, use a radio without container, along with a label that clearly spells out its intention.
With container
Suitable for scenarios when you want to deliberately separate the options, or when you have a slightly longer label accompanied by a short description. You can also use it in multi-field forms to create balance in your layouts
How best to use
When to use a default option
Use a default option when you know the users' preference based on historical data, when you would like to influence the users' choice, or when doing this expedites the process. However, don't set a default if it might come off as prejudiced or presumptive, since this runs the risk of alienating users. It's also not recommended when data accuracy is crucial, as the choice needs to be made by users rather than by system default.
Do
Make sure there's a relatively small number of items to choose from, such as 6 or fewer. Use subsections or other components such as dropdowns if there are too many options.
Do
Rank the choices in a logical sequence, such as from low to high or least to most.
Don't
Don't nest radios, as this adds complexity to the interface and interactions. Re-structure your information so all radios have the same level of hierarchy.
Optional fields
When providing a radio component for an optional question, it's best to include an option for users to opt out of answering, such as "None of the above", "Prefer not to say", or "Skip", instead of allowing them to deselect.
When not to use
Don't use it to toggle between 2 different states
Use a switch if you want to toggle between 2 selections where the selected state needs to be applied immediately.
Component comparison table
Component
Usage
Number of options
Checkbox
Use for selecting one or more options out of a list of independent, always visible options.
Commonly used for one to 6 options. If you have many options, consider organising them into subsections for easy reading.
Radio
Use for selecting one option out of a list of mutually exclusive, always visible options.
Commonly used for 2 to 6 options. Unsuitable for too many options.
Chip
Use when selecting one or more short options, stacked horizontally.
Commonly used for at least 2 and up to 9 options.
Switch
Use for toggling between 2 opposing states like a digital switch. Best for adjusting settings.
For 2 built-in, opposing options.
Dropdown
Use when selecting one or more options out of a list that expands when the users interact with it.
When there's one or more options. Commonly used for scenarios with more than 6 options.