Radio

Anatomy

Anatomy elements

#	Required	Element	Description
1		Container	Wraps the input, label, and assistive text.
2		Radio	A circle that fills with an inner dot when its option is selected.
3		Label	Names the option the Radio selects. Can accept rich content.
4		Assistive text	Displays description or error text to aid the user.

Guidelines

Radio vs. Checkbox and Toggle

Radios, Checkboxes, and Toggles are all form controls that let a user select options. However, it's important to understand the difference as they are not interchangeable:

• Radios are limited to only one choice in a group of options that cannot be deselected.
• Checkboxes allow users to select zero or more options independently and allow deselection.
• Toggles function similarly to real-world on/off switches. Form submission is not required; the setting takes effect immediately.

Radio vs. Select and SegmentedControl

Radios, Selects, and SegmentedControls all allow a user to pick a single value. Using the correct component depends on how many options there are and the goal of the control:

• Radios display every option at once in a vertical list. Best suited for a limited list of two to seven options, especially when the options require descriptions.
• Selects collapse all options behind a trigger and dropdown. Prefer using them for longer lists.
• SegmentedControls present a few mutually exclusive options as a compact row of buttons. Use them to switch the view of the content beside them, not to fill out a form.

Using Radio groups

When creating many Radio options, place them within a RadioGroup component to tie them together as a set. Radios within a group can use a shared label or have their disabled states collectively toggled.

Best practices

Clearing a selection

Once selected, a Radio cannot be deselected. When "none of these" is a valid answer, give the group an explicit option for it instead of expecting the user to undo their choice.

Default selection

Preselect the safest and most common option. An empty group creates unnecessary extra work for the user in most cases, and it hides the fact that a choice is required until validation fails.

Dependent controls

An option that needs further user input can reveal a control below its label, such as a TextField for a number of days or a Select for a permission level. Keep the dependent control disabled until its option is selected so it never reads as an independent choice, and indent it to align with the label text rather than the Radio.

Group size

Keep a group to seven options at most. Beyond that, the group dominates the page and the options become harder to compare than to scroll past. For longer lists, use a Select instead.

Layout

Stack options vertically. A single column gives every label the same visual starting point so options can be parsed easier. Limit horizontal groups to one- to two-word labels with no description.

Customization

Custom label

The Radio's label accepts rich content as well as plain text. Use it to emphasize the part of the option that distinguishes it, or to add a Badge to denote a recommended choice. Avoid other interactive elements such as links as the label itself is interactive.

Behaviors

States

Truncation

Long labels wrap to multiple lines by default. Truncation can be enabled for labels that would otherwise push the layout wider than its container; it prevents wrapping and cuts the label short with an ellipsis. Be mindful when enabling. If text must be truncated, ensure the label is formatted in a way where the most important text is placed closer to the beginning.

Content

Assistive text

Assistive text displays below the Radio and gives the user information about the options they're choosing between. Assistive text comes in different forms including descriptions and error text.

Description

Use description text to provide hints, formatting guidance, or constraints that help users make the right selection. Use complete, but short sentences for description text. Apply consistently—if one option has a description, every option should.

Error

Error messages communicate issues the user must resolve before submission. Frame validation errors as direct instructions, not accusations. Be sure to provide guidance on how to fix the error. Keep messages direct and concise. Never use "Please".

Labels

Group

Label the group with the question the options intend to answer. The group label carries the shared context so each option label can stay short.

Option

Write option labels in sentence case with no end punctuation. Keep them as grammatically uniform in structure as possible to make them easier for users to scan and read. State what the option does, if possible, rather than how it is implemented.