Skip to main content

Radio



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