RadioGroup

Use RadioGroup to allow users to select a single option from a short list of related options.

Orientation

A vertical orientation makes options easier to visually scan. A horizontal orientation is not yet supported.

Anatomy

Edit in Figma

Label: A title that labels the group of options and helps users understand the relationship between the options in the group

Required indicator: Indicates that a selection is required

Caption: May be used to provide additional context about the RadioGroup when the label alone is not sufficient

Options: A list of mutually exclusive options represented using Radios

Validation message: A message explaining why the selection failed validation. See the form pattern documentation for more information on form validation patterns.

Best practices

• Put radio buttons in a logical order
• Only use a RadioGroup for a short list of options: aim for 6 or less options. For longer sets of options, consider using a <select> input, an ActionMenu, or an autocomplete input.
• Radio buttons cannot be unchecked, so only use a RadioGroup when a selection is required. Consider the following alternatives:
  • use a RadioGroup, but with one option that equates to "none of these options"
  • use a CheckboxGroup that fails validation if more than one option is selected
• If there is an option that's the most likely option to be checked, that option should be checked by default