Intro

Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button.

Usage

Do’s

  • Use radio buttons for single selection.
  • Use radio buttons when at least two distinct choices are available.
  • Use radio buttons to display all available options directly to users.

Don’ts

  • Do not use radio buttons for multiple selection.
  • Do not use radio buttons if the options are numbers with fixed steps, use a slider instead.
  • Do not use a radio button when there are only two mutually exclusive options, instead, use a single checkbox or switch. For example, to accept terms of use, use a single checkbox for “I agree” instead of two radio buttons for “I agree” and “I don’t agree”.

Structure

A. Property Name

A set of radio buttons is used to show all available values for a certain property. The property name should be displayed at the top of the list. If the whole page is used to display available values, display the property name as the title in the app bar.

B. Radio Button Cell

A radio button followed by a text value forms one radio button cell. Each available option forms its own cell. Display the cells in a meaningful sequence (e.g. alphabetical sequence for names).

C. Cell Group

Radio button cells can be grouped into categories. Each category has a header showing the name of the group.

Behavior & Interactions

The user taps a radio button cell to activate the related option. Each cell is one touch target. Tapping an activated option does not deactivate it but tapping a different option transfers activation to that option. Therefore, a user can select only one option from a group of radio button cells. When a specific option is disabled, apply 50% opacity to that radio button cell. Disabled options are not interactive.

Enabled radio button cells
Enabled radio button cells
Disabled radio button cells
Disabled radio button cells

Specs

Padding and Alignment

Radio button list is responsive based on device size. Each row follows the spec of object cell. The horizontal padding follows the keylines of the device.

For each radio button cell group, a header is used to display group name.

Mobile

Group name in a header (if applicable)
Group name in a header (if applicable)
A list of radio button cells
A list of radio button cells


Tablet



Sample Element Alpha Hex
Unselected radio button color #89919A
Selected radio button color #0854A0
Value text #32363A
Group name text #6A6D70