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.
Radio buttons
Checkboxes
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.
Radio buttons should be used instead of checkboxes if 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
Switches should be used instead of radio buttons if each item in a set can be independently controlled.
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
When to use checkboxes instead of switches
Platform differences
Adapt selection controls to correspond with platform standards.
Use Material switches, checkboxes, and radio buttons.
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.
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
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.
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.
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.
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.
2. Track
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.
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.
Color
Crane's selection controls use a custom color.
| Element | Category | Attribute | Value |
|---|---|---|---|
| Selection controls | Secondary | Color Opacity |
#E30425 100% |
Specs
Checkboxes
- Measurement 24
Radio buttons
- Measurement 20
Switches
- Measurement 20
- Measurement 36
