Radio Group

Used to choose one option from a short list of mutually exclusive choices.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To enable choosing a single option from a short list of mutually exclusive choices.

When not to use

  • When multiple options could be selected at once (use a Checkbox instead).
  • To display only one option (use a Checkbox instead).

Best Practices

Do

Do maintain top alignment of Radio and its label, especially when using helper text spanning multiple lines.

Caution

Be careful with having too many choices available. If there are more than 7 options, use a Select component.

Don't

Don’t use a Radio Group with only one option. Use Checkbox component instead.

Don't

Don’t use a Radio Group when multiple options could be selected. Use a Checkbox component instead.