Radio Field

A radio includes a radio input and its label. Radios are used in radio groups that let people select exactly one option from a set.

Also known as:
Radio buttonRadio groupOption buttonChoiceSelectionDiscRadio input

AnchorNeed to know

  • Radios are only used in radio groups to let people select exactly one option from a set.


UI Kit

To keep in mind

A radio lets a user choose to select a single item. When used in a Radio Group, a radio lets a user make exactly one selection from a set, which is all visible at the same time.

There must always be more than one radio used together in a radio group.

  • Ensure both label and input are clickable to select the radio. That is, use label tags that wrap the input element or use a for attribute.
  • Focus indicator
    • See Interaction states guidelines for focus indicators.
    • On keyboard navigation and click show focus indicator on radio button only (exclude label).
    • Although the label is still navigable/clickable when selecting a radio, exclude showing the focus indicator on the label.

When to use and when not to use

When to use
  • Only use radios inside a radio group.
When not to use
  • When there’s limited space, consider using a select dropdown instead.
  • For settings that are immediately applied, consider using a toggle switch instead.

See also

See also Toggle switch, Checkbox Field

External links

Here are some examples of other existing design systems: