Radio - Usage
Radio buttons are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices.
- Label
- Required indicator
- Radio button group
- Helper or feedback text
- Radio button
- Radio button label
Options
- Label: See form field.
- Helper text: See form field.
- Feedback text: See form field.
Behavior in context
- Validation: Radio buttons are validated collectively, not individually. For more information on validation, see validation.
- Interaction: Clicking on a radio button toggles its state between checked and unchecked/default. Every other radio button in the group is automatically unchecked.
States
Dos and Don’ts
- Do use radio buttons when the user needs to select only one option from a set of options
- Do group related radio buttons together to indicate that only one option can be selected at a time
- Do provide a default (already selected) option when the user first sees the radio button group
- Don’t use radio buttons if the user needs to select multiple options from a set of options - use a checkbox instead
- Don’t use only one radio button in a group, groups should have at least two options