Radio

Overview#

Use radio buttons to present a list of options where only a single selection must be made.

Design Guidelines#

Use when#

  • In forms.
  • To enter data.
  • A user must select one option.

Don't use when#

  • A user can select multiple options.

Visual style#

  • Please see examples below to know which type of visual style radio button to use.

Behaviour#

  • On page load, a default selection must be chosen.
  • One option must always be selected.
  • Empty radio buttons are selected on click.
  • A previously selected radio button is unselected if the other radio button is selected.
  • Never have only a single radio button.
  • The radio button and the label can be clicked or touched to make a selection.

Editorial#

  • Each label should clearly describe the result of selecting the radio.
  • Always write label text in sentence case.
  • Avoid long labels.

Examples#

Default Radio

For aquiring a single answer that does not change any further content, use either style of radio button, but priortitize the disc style first.

  • Always include a label to the right of the disc.
  • Always show a title above the list.

Button Radio

Use this style when a button selection will result in content being changed below it.

  • Always include a label inside the button.
  • Always show a title above the button group.
Last updated on by KimLBrooks