Selection controls

Selection controls allow the user to select options.

Android Not available Web Not available Flutter Not available iOS Not available

Interactive demo

This demo lets you preview selection controls. Each tab displays a different type of selection control.

Developer documentation

Component Platform Status
Checkboxes Android
iOS
Web
Flutter
Available
Platform exception
Available
Available
Radio buttons Android
iOS
Web
Flutter
Available
Platform exception
Available
Available
Switches Android
iOS
Web
Flutter
Available
Platform exception
Available
Available

Usage

Selection controls allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs.

Principles

Familiar

Selection controls have been in user interfaces for a long time and should be used as expected.

Scannable

It should be visible at a glance if a selection control has been selected, and selected items should be more visually prominent than unselected items.

Efficient

Selection controls make it easy to compare available options.


Types

Selection controls are radio buttons, checkboxes, and switches.

Two radio buttons. One is selected and the other is unselected

Radio buttons

Two checkboxes. One is selected and the other is unselected

Checkboxes

Two switches. One is on and the other is off

Switches


When to use radio buttons

Selection controls should be used

Use radio buttons to:

  • Select a single option from a list
  • Expose all available options

If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.

List of options to select phone ringtone. Each option has a radio button
Radio buttons allow for a single option to be selected from a visible list

Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

List of shipping options to home or work. Each option has a checkbox
Don'tDon't use checkboxes when only one item can be selected from a list. Use radio buttons instead.
List of shipping options to home or work. Each option has a radio button
DoUse radio buttons when only one item can be selected from a list.

When to use switches

Use switches to: Switches should be used instead of radio buttons if each item in a set can be independently controlled.

Use switches to:

  • Toggle a single item on or off, on mobile and tablet
  • Immediately activate or deactivate something
List of phone settings. Each setting has a switch
Switches

Switches should be used instead of radio buttons if each item in a set can be independently controlled.

List of phone settings. Each item has a radio button
Don'tDon't use radio buttons to toggle items on or off. Radio buttons convey that a set of items are options, and that only one can be selected at a time.
List of phone settings. Each item has a switch
DoUse switches to turn an item on or off, especially on mobile instead of a checkbox.

When to use checkboxes

Use checkboxes to:

Use checkboxes to:

  • Select one or more options from a list
  • Present a list containing sub-selections
  • Turn an item on or off in a desktop environment
List of meal options: pickles, tomato, lettuce, and cheese. Each option has a checkbox
Checkboxes

When to use checkboxes instead of switches

List of types of emails to receive. Each item has a switch
Don'tIf a list consists of multiple options, use checkboxes instead of switches. Checkboxes imply the items are related, and take up less visual space.
List of types of emails to receive. Each option has a checkbox and the first option is a parent control for receiving emails
DoCheckboxes let users select one or more options from a list. A parent checkbox allows for easy selection or deselection of all items.

Platform differences

Adapt selection controls to correspond with platform standards.

Android
Use Material switches, checkboxes, and radio buttons.
iOS
Native platform switches should be used as they have matching functionality and presentation as Material switches.

Use switches instead of checkboxes and check mark lists instead of radio buttons as these are the graphics expected on iOS.

Checkboxes

Usage

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Checkboxes...

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Selected and unselected checkboxes
Selecting multiple items in a list using checkboxes
Turning an item on or off using a checkbox

Parent and child checkboxes

Checkboxes can have a parent-child relationship with other checkboxes.

  • When the parent checkbox is checked, all child checkboxes are checked
  • If a parent checkbox is unchecked, all child checkboxes are unchecked
  • If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox
Checked, unchecked, and indeterminate states of a parent checkbox

States

Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused and pressed states.

Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused and pressed states.

Matrix of all checkbox state combinations
Interaction states for selected, unselected, and indeterminate checkboxes

Radio buttons

Usage

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If...

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

Selected and unselected radio buttons
Selected and unselected radio buttons
Using radio buttons to select a single item

States

Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused and pressed states.

Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused and pressed states.

Matrix of all radio button state combinations
Interaction states for selected and unselected radio buttons

Switches

Usage

Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile.

Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile.

State

A switch is successfully toggled when the switch thumb slides to the other side of the track upon user interaction.

Text label

The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Avoid creating a switch that includes the text "on" and "off" within the graphic itself. The switch alone should be sufficient.

Unselected and selected switches with numbers identifying its 2 elements and states
1. Thumb
2. Track
Using a switch to turn an option on and off

Behavior

When a user toggles a switch, its corresponding action takes effect immediately.

When a user toggles a switch, its corresponding action takes effect immediately.

Display processing status

Because a switch shows the actual status of something, sometimes there is a delay in its change of state. In such cases, a processing status animation can be used.

A processing status is an animation on the thumb of the switch. For example, it can be used when a switch that controls a hardware feature experiences a delay before its final status can be confirmed.

A processing status animation on the thumb of a switch

States

Switches can be on or off. Switches have enabled, disabled, hover, focused, and pressed states.

Switches can be on or off. Switches have enabled, disabled, hover, focused, and pressed states.

Display the outer radial reaction only on form factors that use touch, where interaction may otherwise obstruct the switch completely.

For desktop, the radial reaction isn't needed.

Matrix of all switch state combinations
Interaction states for on and off switches

Theming

Crane Material Theme

This travel app's selection controls have been customized using Material Theming to use custom color. Crane is a travel app that uses Material Design components...

This travel app's selection controls have been customized using Material Theming to use custom color.

List with checkboxes with custom style to match Crane app’s brand
Crane's customized selection controls

Specs

Checkboxes

  • Measurement 24
 

Radio buttons

  • Measurement 20
 

Switches

  • Measurement 20
  • Measurement 36
 

Up next