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.
Checkboxes
Radio buttons
Switches
Theming
Specs
Checkboxes
- Measurement 24
Radio buttons
- Measurement 20
Switches
- Measurement 20
- Measurement 36