Skip to main content

Radio

Radio buttons provides a selection with two or more options. Only one option can be selected.

Do's​

  • use labels as click targets (clicking the label will select that option)
  • group related fields
  • order logically (e.g. ages 18-25, ages 25-35, ages, 35-50, over 65)
  • indicate whether the input group is optional - if it's mandatory, have a neutral option (e.g. other, n/a) selected by default
  • make use of helper text if there are further directions or hints the users may need in completing their goal
  • write specific and clear error messages, so users understand how to address the error

Don'ts​

  • don't add them without grouping first
  • don't nest elements under radio buttons - keep all the options on the same level

When to use​

  • when you have under 10 items
  • when users need to select options or toggle settings, for example
  • in forms with multiple non-exclusive options (e.g. search filters)
  • only one selection can be made

When not to use​

  • avoid when more than one option can be selected - use checkboxes instead