Checkbox
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.
Basic checkboxes
Checkbox with FormControlLabel
Checkbox
can be provided with a label thanks to the FormControlLabel
component.
Checkboxes with FormGroup
FormGroup
is a helpful wrapper used to group selection controls components that provides an easier API.
Customized checkbox
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.
When to use
Accessibility
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)
- All form controls should have labels, and 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 theinputProps
property.
<Checkbox
value="checkedA"
inputProps={{ 'aria-label': 'Checkbox A' }}
/>