FUSE
DOCS
Nextjs
Reference
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
Label
You can provide a label to the
Checkbox thanks to the FormControlLabel component.Size
Use the
size prop or customize the font size of the svg icons to change the size of the checkboxes.Color
Icon
Controlled
You can control the checkbox with the
checked and onChange props:Indeterminate
A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.
You can change the indeterminate icon using the
indeterminateIcon prop.:::warning When indeterminate is set, the value of the
checked prop only impacts the form submitted values. It has no accessibility or UX implications. :::FormGroup
FormGroup is a helpful wrapper used to group selection control components.Label placement
You can change the placement of the label:
Customization
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
- 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 (for example
aria-label,aria-labelledby,title) via theinputPropsprop.
<Checkbox
value="checkedA"
inputProps={{
'aria-label': 'Checkbox A',
/>