Radio button
Radio button is one of the selection controls that lets users select one item from a list.
1. Alike components
Checkboxes are often confused with radio buttons and switches in some use cases. The guidance below helps to differentiate the difference.
| Radio buttons | Checkboxes | Switches | |
|---|---|---|---|
| Minimum #of options to use | At least two | At least one | Only one (on or off) |
| Are the choices mutually exclusive? | Yes | No | N/A (independent) |
| Does the choice need a submission to take effect? | Yes | Yes | No |
| Is there an un-checked state? | Yes | Yes | No (always on or off) |
| Can you toggle the state on the same option? | No | Yes | Yes |
2. When to use radio buttons
Radio buttons allow users to select one option and the selection on group can not be reverted.
Do
Use radio buttons to let users select one option from a list.
Don't
Do not use radio buttons if there is only one option. Use checkbox.
Do
Include an option that user can select all or none of the options.
Don't
Do not use radio button if the selection on the radio group needs to be reversible.
Don't
Do not use radio buttons when there is only one option. Users can not un-select the same option once the option is selected.