IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Radio

/

Design

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.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Radio documentation and examples.

Size

A radio can be any of the four available sizes.

Recipients

X-small: Only use this when you really need to squeeze, like in a sidebar.

A form’s density (standard, compact) is 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

Forms support multi-column layouts. Be cognizant of related fields and how they are typically represented. When in doubt, limit to one column.

Disabled States

An alternative to disabled states is conditionally displaying 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.

Radio Buttons

The “button” or “button-minimal” display type can be used to show the radio options as a row or column of buttons. These should be used sparingly as a way for users to quickly select option(s) and only when all of the options are concise - no more than 15 characters.

Don't include long labels in the radio button options.

Don'tinclude long labels in the radio button options.

Do use radio buttons to toggle or filter data.

Douse radio buttons to toggle or filter data.

Microcopy

Labels

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

Don't make the label a complete sentence.

Don'tmake the label a complete sentence.

Do keep it short and sweet.

Dokeep it short and sweet.

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

Help Text

In the case of an error, the help text should be updated explaining why an error occurred and how it’s fixed.

Don't allow errors without displaying help text.

Don'tallow errors without displaying help text.

Do use help text to explain why an error occurred and how it's fixed.

Douse help text to explain why an error occurred and how it's fixed.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconWarning Warning
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)
React NativeIconConfirmation PassIconCritical ViolationsIconWarning N/A
  • IconCriticalThe accessibilityState property needs to be used to show selection state.
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)

Platform

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