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 not recommended to have a default option selected because
    • The user might not realise they’ve missed a question
    • The user might submit a wrong answer
  • If an answer can be left empty, include a 'None of the abobe' or similar option if it's suitable.
  • When there are more than 4 options, consider switching to dropdown component.
  • If the choices are not mutually exclusive, use checkboxes component instead. Also see guidelines for choosing between radiobuttons, checkboxes, and toggles.
  • If Radio buttons are related to each other, use selection group to achieve that.

Variations

Default

Assistive text

Group

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

Radio button group