Description

ONGOING

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Usage & Behavior

Use radio buttons to:

Select a single option from a list
Expose all available options

General guidelines

Structure

A radio button consists of:

A label describing the option
A corresponding radio button

States

The radio button allows 2 modes:

	Checked
	Unchecked

For each if the modes, you can find the different states below:

Interaction

The user clicks a radio button to activate the related option. Clicking an activated option does not deactivate it, but clicking a different option transfers activation to that option.

A user can select only one option from a group of radio buttons.

A group of radio buttons behaves like a single control: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.

The radio will have an hovered/active state when hovering/clicking both the radio or the label describing it.

Validations and errors

Please refer to Field validation page for more information.

Best practices

List options in a logical order:
- Most likely to least likely to be selected.
- Simplest to most complex operation.
Make the most likely or convenient radio button option the default.
If you need to have an unselected state, add a radio button with a None option.
If you can't have a comprehensive list of all possible options, add an Other option.

Use a radio button when the options being presented are important enough to occupy more screen space.

Do not use a radio button if:

You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
The default option is recommended for most users in most situations. In this case, consider a dropdown list instead, which uses less space by not showing all options straightaway.
You need to present more than 8 options. Use a dropdown menu.
In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
The options are numbers with fixed steps. Use a slider.

Try to avoid:

Putting things in alphabetical order because it is language dependent and not localizable.
Overlapping choices. e.g. Select age: 0-20, 20-40 - What do you pick if your age is 20?
Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you pick if you are exactly 20?

Accessibility compliance