Selection Controls
Selection controls allow the user to select options.
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.
Three types of selection controls are covered in this section:
- Checkboxes allow the selection of multiple options from a set.
- Radio Buttons allow the selection of a single option from a set.
- Switches allow a selection to be turned 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.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
Checkbox can also be used with a label description thanks to the FormControlLabel component.
Checkboxes with FormGroup
FormGroup is a helpful wrapper used to group selection controls components that provides an easier API.
Radio Buttons
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.
Radio buttons should have the most commonly used option selected by default.
RadioGroup is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group.
Switches
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.
Switches with FormControlLabel
Switch can also be used with a label description thanks to the FormControlLabel component.
Switches with FormGroup
FormGroup is a helpful wrapper used to group selection controls components that provides an easier API.
However, we encourage you to use a Checkbox instead.
Customized Switches
If you have been reading the overrides documentation page but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch.