Skip to main content

Radio

Since 2.6.0 Form-ready since 2.6.0
Show deprecated version


Guidelines​

A radio button is an interface element that enables the user to choose only one option from a predefined set of mutually exclusive options. They 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.

Anatomy radio button

  1. Label
  2. Required indicator
  3. Radio button group
  4. Helper or feedback text
  5. Radio button
  6. Radio button label

Options​

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​

States radio button

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