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:
- Radio Buttons allow the selection of a single option from a set.
- Checkboxes allow the selection of multiple options from a set.
- Switches allow a selection to be turned on or off.
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.
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.
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.
⚠️ While the material design specification encourages theming, these examples are off the beaten path.
Accessibility
All form controls should have a label to identify it, this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element (FormControlLabel).
When a label can't be used, it's necessary to add an attribute directly to the input component.
In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) via the inputProps property.
<Checkbox
value="checkedA"
inputProps={{ 'aria-label': 'Checkbox A' } }
/>