Skip to main content

Radio

Enable users to select a single item from the available options.

They come in two types: with and without a label.

View in StorybookExternal link icon

Behavior​

Provide a method to confirm the selection.

Best practices​

We recommend radio selectors for representing two to six options; consider using a Select for larger selections.

Do IconDo
Do Example
Don't IconDon't
Don't Example

If you want a more customizable control, consider using Pills.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Radio button's selected state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Radio Group Pattern for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.