Skip to main content

Radio

Radios allow users to select only one option from a group of two or more options.

Code documentation

Web

Anatomy

The radio component is made up of four elements.

  1. Radio input
  2. Helper text
  3. Status mark
  4. Label
Anatomy diagram numbering four elements of a radio.

Variants

Label

Labels are not required if an adjacent label is included that adequately describes the purpose of the radio and is correctly referenced to the field for accessibility purposes

Two radios are compared side-by-side. The left radio includes a label positioned to the right of the radio input. The right radio does not include a label.

Helper text

Helper text can be included alongside the label to provide additional context or guidance for using the control. The helper text wraps to the next line once it reaches the width of the container.

A radio with label includes sample helper text immediately below the label. The helper text is aligned to the left edge of the label text and both are positioned to the right of the radio input.

Behavior

Text flow

When labels wrap to multiple lines, the first line of the text should remain vertically centered with the control. Secondary text should simply wrap to the next line.

The radios's label and helper text each wrap to multiple lines when they meet the edge of an implied container around the radio.

States

Radios can be either unselected or selected. Each of those statuses has five states:

  1. Enabled
  2. Focus
  3. Hover
  4. Active
  5. Disabled
The unselected radio includes enabled, focus, hover, active, disabled, and pending states.
Unselected
The selected radio includes enabled, focus, hover, active, disabled, and pending states.
Selected