Use the radio component when a user needs to select one option from a list.


An image displaying a Radio with a radio and label.

  • Radio: A selection control.
  • Label: A description for the radio.


Use the radio component to enable users to select a single option from a list.

For scenarios that allow for multiple selections, use the Checkbox component instead. Keep the radio label descriptive and concise: aim for no more than 3 words. Write labels in sentence case and without ending in punctuation.


To group related radio components together in a list, use the Stack and FormControl components. When rendering a group of radio components, make sure to consider all potential option. Remember to include "None" or "Other" options when necessary.


Ensure radio options are are mutually exclusive. Include "None" or "Other" options when necessary.


Don't overlap or leave out potential radio options from the list.


When used in groups, order the radio options in a logical order (e.g. smallest to largest).


Don't order radio options without logic in a group.


Radios have static dimensions and three different states: default, checked, and disabled.


Please use FormControl to render a standard radio input field. If using standalone, it should always be accompanied by a corresponding <label> to improve support for assistive technologies.

  • Checkbox: Use the checkbox component to select one or more options of a limited number of choices.
  • Select: Use the select component to enable selection of one option from a list.
  • FormControl: Use the form control component to display form inputs alongside labels, validation and more.
  • Stack: Use the stack component to create a layout for its immediate children along the vertical or horizontal axis.