Radio button - 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
- Radio button:
- Label: See form field.
- Radio button group:
- Label: Use group labels if radio button labels are not self-explanatory and in context of forms. See form field.
- Helper text: See form field.
- Show text as tooltip: See form field.
- Required: When enabled, users are required to select an option in a group. See form field.
- Direction: Choose to align radio buttons vertically or horizontally. We typically use a horizontal layout for short labels with two to three options, and a vertical layout for more options to enhance readability.
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