| 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 select a single option from a list, while exposing all available options.
...
A label describing the option
A corresponding radio button
...
States
State | Unselected | Selected |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Focused |  |  |
Focused Hover |  |  |
Focused Active |  | |
Focused Disabled |  |  |
...
Please refer to Field Validation page for more information.
...
Best practices
Use:
to select a single option from a list, while exposing all available options
Do not Use:
where there is a need to allow the user to make multiple selections → use Checkboxes, because radio buttons only allow single-selection.
where there is a need to present more than 8 options → use a Drop-down Menu.
where the default option is recommended for most users in most situations. Consider a Drop-down Menu instead, which uses less space by not immediately showing all options.
where there are only two mutually exclusive options. Combine them into a single Checkbox or Switch. For example, use a checkbox for “I agree” (e.g. to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
where the options are numbers with fixed steps → use a Slider.
...