Also known as:
Radio buttonRadio groupOption buttonChoiceSelectionDiscRadio input

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.

Need to know

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

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.

When to use

  • Use radios when a radio group needs items.

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: