Skip to main content

Radio

A radio button is an interactive element that allows users to select a single option from a predefined set of choices.

Overview

Radio buttons offer a mechanism for users to choose only one option from a predefined set of mutually-exclusive options.

They are commonly used in forms, settings panels, and various interfaces requiring users to make a single selection from multiple options.

A group of radios that are vertically stacked together.

Dos and Don’ts

Do
  • Always use within a parent component.
  • Always use as part of a group.
Don't
  • Don’t apply an assistive text directly to the radio button, but instead to the parent component.

Anatomy

Anatomy of a radio button.
  1. Radio input: A radio input indicates the appropriate state. By default it is unselected.
  2. Label (Optional): Describes the information you want to select or unselect.

Variations

Default

A default unselected radio button with a label.

Modifiers

Label

A label should always be present unless being used as a nested component and an alternative label is given.

A default unselected radio button with a label.
A default unselected radio button without a label.

Content

All content should use sentence case.

Label

  • Always use clear and concise labels for radio buttons.

Overflow

When the label exceeds the available width, it will wrap onto a new line.

A default unselected radio button with a label.

Behaviours

States

The radio button can be in one of two states: selected or unselected. The default state is unselected.

An unselected radio button with a label.
A selected radio button with a label.

Interactions

Users can trigger the radio directly or by clicking the radio label. Having all regions interactive creates a more accessible click target.

An unselected radio button with some highlighting over the input to signify that it is interactive.
An unselected radio button with some highlighting over the label to signify that it is interactive.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Default state of a radio button.

Hover

A radio button that is hovered.

Active

A radio button that is active.

Focus

A radio button that is focused.

Disabled

A radio button that is disabled.

Error

A radio button that is in an error state.

Examples

LTR examples

Here are some examples of the component in a left-to-right context:

A left-to-right example of radio buttons being used within cards. The input circles are positioned on the right-hand side of each card. The radio buttons show that the options are mutually exclusive, while the cards allow for more detailed information than a standard label, such as an icon, heading, and description.
A left-to-right example of radio buttons being used to select food options. Each option has an input circle on the left, followed by the item's name and description.

RTL examples

Here are some examples of the component in a right-to-left context:

This image shows the same content as the first left-to-right image but in Hebrew, with a right-to-left layout. The input selection circles are positioned to the left of the text for each option, opposite to the left-to-right version where the inputs are on the right.
This image mirrors the content of the second left-to-right image but in Hebrew, using a right-to-left layout. The input selection circles are positioned to the right of the text for each option, opposite the left-to-right version where the inputs are on the left.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 Stable
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 Stable