Radio buttons allow users to make a single selection from a set of options.

  1. Radio Button
  2. Label

Radio buttons are always displayed as a part of a group of two or more options. Radio buttons can be grouped one of two ways — horizontally inline or vertically stacked.


Label placement is to the right of the button by default, however, the labels can also be placed on the left.


Radio buttons have four states — unselected, selected, disabled or error. Only one button within a group of radio buttons can be selected. For scenarios where the user can select more than one option use Checkbox or Select Multiple.


Radio can be displayed in large, medium and small sizes.

  • No more than one option from a radio group can be be selected.
  • Present the options in a logical order for the best context. Some examples include alphabetically or by priority.
  • Always provide a label for a radio button.
  • Write labels in sentence case.
  • If there are two options showing an on/off setting, consider using Switch.
  • For lists with more than ten options, consider using a Select.
  • When there are only two or three options with short labels, consider using a Button Select.