RadioButton

StableAccessible

Radio buttons are used to pick an option when only one option can be chosen.

Usage

Example

Principles

  • If the user can select more than one option from a list, use checkboxes instead.
  • Radio button label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long.
  • It is recommended to have a default option checked for radio button groups Radio button groups.
  • When there are more than 4 options, consider switching to dropdown component.
  • If the choices are not mutually exclusive, use HDS Checkbox component instead. Also see guidelines for choosing between radiobuttons, checkboxes, and toggles.
  • If Radio buttons are related to each other, use HDS Selection group to achieve that.

Variations

Default

Group

Related radio buttons can be grouped together with the Selection group component. See HDS Selection group page for full documentation.

Radio button group