Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Let users pick only one option from a short list.

Radios constrain users to choose only one option. Selecting that one will deselect another. Use radios when there are five or fewer choices to display simultaneously. For a list longer than five, try a select instead.

Size

Radio size (x-small, small, medium, large) and the form’s density (standard, compact) are dictated by the form modifier component. Check those guidelines for more detailed recommendations.

State

A radio’s state depends on the interaction itself or a submission error.

Recipients

The actual focus state is sorted for you, so anyone navigating via keyboard or screen reader is set. A disabled radio prevents the user from interacting with a field until certain conditions are met. It’s a good way to prevent invalid submissions, but should be used sparingly.

Mobile

Uniform radio buttons may be used for both Apple and Android devices. Keep a close eye on the intent of the radio and never use it outside of a form.

If the requirement is to switch between different views, use a segmented control instead. When asking the user to enable or disable a function, feature or setting, use a switch.

Usage

Layout

Limit yourself to one field per row.

Disabled States

An alternative to disabled states is hiding the field until it becomes relevant. It reduces cognitive load and creates a much clearer path to completing the form—especially as fields change with preceding selections.

Microcopy

Labels

A label should clearly and concisely describe the field’s purpose with no more than a few words.

radio-labels-dont

Don'tmake the label a complete sentence.

radio-labels-do

Dokeep it short and sweet.

Check UI label guidelines for more detail on case and punctuation.

For required fields, place an asterisk at the beginning of the label. There’s no need to spell out required and extend the length of that label.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.