Radio

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

Need to know

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

Visuals

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.

External links

Here are some examples of other existing design systems: