COMPONENTS

Radio

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

radio-intro.png
radio-anatomy.png
  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.

radio-variations.png

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

radio-label-placement.png

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-states.png

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

radio-sizes.png
  • 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.