Radio

Status: Available View in Storybook

A common interactive control for users to make a single selection.

Type

Default

Default Radio

Usage

Radios are used in forms when users must make a single selection among multiple choices.

Use for a small set of choices
Avoid using Radios for items that have many choices. If you have over six choices, consider using a dropdown.

Behavior

Never use a single Radio as a toggle-able control, such as, "I agree to the terms and conditions"
Avoid using multiple Radios for either-or options as you would a switch

Visual style

Always keep radios top-aligned to the first label line when the label wraps to multiple lines
Never change the layout to have the radio on the right side of the label
Always include an icon for errored Radios
Always maintain 16px between Radio options

Content strategy

  • Consider copy that accompanies checkboxes “body copy”
  • Generally, make actionable
  • Follow normal casing, grammar, and punctuation practices (e.g. use a period for full sentences)
  • Adhere to parallel syntax when authoring multiple checkboxes on a single page / screen

Accessibility

Characteristics

  • Checked
  • Unchecked
  • Partially checked for Radio with sub (child) options
  • User clicks label to check radio button

Keyboard/focus expectations

  • Receives keyboard focus when tabbed or arrowed to
  • Check/uncheck by pressing Spacebar or automatically checked when arrow keys are utilized to navigate radio

Screen reader expectations

  • Radio label is announced Ex. “Yesradio button,…
  • Current state is announced Ex. “…checked 2 of 2.
↑ Back to top