| Table of Contents |
|---|
...
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:
...
A label describing the option
A corresponding radio button
States
The radio button allows has 2 modes:
 | Checked / Selected |
 | Unchecked / Unselected |
For each if the of these modes, you can find the different states below can apply:
...
A radio button is Active at the point it is being clicked (during the click action).
Interaction
The user clicks a radio button to
...
select the related option. This deselects the previously-selected option.
Clicking an
...
option which is already selected does not
...
deselect it, but clicking a different option transfers
...
the selection to that option.
...
Only one option
...
can be selected in a group of radio buttons.
One option must always be selected.
A group of radio buttons behaves like a single control:
...
using ‘tab’ focuses on the group container,
...
and users can then cycle through the
...
individual options using the arrow keys.
The radio will have
...
a hovered
...
state when hovering
...
over either the button or the label.
The radio can be selected by clicking on either the button or the label
...
.
Validations and errors
Please refer to Field validation page for more information.
...
List options in a logical order:
Most likely to least likely to be selected.
Simplest to most complex operation.
Make Make the most likely or convenient radio button option the default.
If you need to have an unselected state, add a radio button with include a None option.
If you can't have a comprehensive list of all possible options, add include an Other option.
Use a radio button when the options being presented are important enough to occupy more occupy all of the necessary screen space.
Do not use a radio button if:
You need to offer allow the user the option of multiple selection. In this case, use checkboxes instead to make multiple selections. Use Checkboxes, because radio buttons are for only allow single-selection contexts only.
You need to present more than 8 options. Use a dropdown Dropdown menu.
The default option is recommended for most users in most situations. In this case, consider a dropdown list insteadConsider a Dropdown list instead, which uses less space by not immediately showing all options straightaway.
In special cases, there There are only two mutually exclusive options. Combine them into a single checkboxCheckbox or toggle Toggle switch. For example, use a checkbox for “I agree” (for example, e.g. 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 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 select if your age is 20?
Forgetting to include choices. e.g. Select age: Below 20-29, Above 20 - 30-39, Over 40. What do you pick select if you are exactly below 20?
Accessibility compliance
A group of radio buttons behaves like a single control: . Only the selected choice is accessible using the tab key, but users can then cycle through the group individual options using the arrow keys.
Design
...