| Table of Contents |
|---|
...
State | Unselected | Selected |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read-Only |  | |
Focused |  |  |
Focused Hover |  |  |
Focused Active |  | |
Focused Disabled |  |  |
...
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.
...