Also known as:
Choice listRadio buttonRadio button groupOption buttonChoiceSelection

Radio Group

Radio groups include a set of radios that let people select exactly one option in a set.

Need to know

  • Prefer vertical (stacked) radios to easily scan and compare options.
  • When there’s only two options, consider if a single checkbox would be better.
  • For settings that are immediately applied, consider using a toggle switch instead.

To keep in mind

  • There must always be more than one radio field used together in a group.
  • Radio Group contains a set of Radios and a Radio Group Label.
  • Show options in a sensible order, such as alphabetical, numeric.
  • Avoid long lists. Chunk long lists and group related options together.
  • The setting only applies when the user takes an action, such as clicking a save button.
  • Use specific, clear, concrete labels.
  • Prefer vertical (stacked) radios to easily scan and compare options.
  • Use a fieldset to group related radio fields together in a set.
  • Offer a default option.
  • Prefer to use a default selected option.
  • Avoid nesting.
  • For Right-To-Left languages, add dir=”rtl” to a div wrapping the Radios

When to use

  • Single choice options
  • Shown side-by-side or stacked
  • Where there is space to show them all at once

When not to use

  • Don’t use when there is more than 20 options
  • When there’s only two options, consider if a single checkbox would be better.
  • For settings that are immediately applied, consider using a toggle switch instead.
  • When there’s limited space, consider using a select dropdown instead.
  • Sometimes, a dropdown menu might be better. If it’s an infrequently used setting, has a good default, has 4 or more options, consider using a select dropdown menu.

See also

Some websites have a “radio button group” concept where radio options are styled like buttons and you can only select one in the group. That’s a different thing to this.

External Links

Here are some examples of other existing design systems: