Radio Group

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

Also known as:
Choice listRadio buttonRadio button groupOption buttonChoiceSelection

AnchorNeed 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.

Visuals

UI Kit

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.
  • 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
  • Disabled state:

Copy guidelines

Radios are helpful when presenting a set of mutually exclusive options out of which a user must make one selection. Keep these points in mind:

Present mutually exclusive options

Each option in a radio group should be mutually exclusive from the other to make it easier for a user to make a selection.

Do:
  • Do
    Select your age group:
    • 18-24
    • 25-34
    • 35-44
    • 45-54
    • 55+
Don't:
  • Don't
    Your age group is...
    • 18-24,
    • 24-34,
    • 34-44,
    • 44-54,
    • 54+

Always introduce options with a label

Always present radio options with an intro sentence (or label) that describes the choice the user has to make. End the label with a colon.

Don’t end options in punctuation

If your options are single sentences, words or fragments, don’t place a period, comma or semicolon at the end of them. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

Write in sentence case

All radio copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name.

When to use and when not to use

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: