Skip to content

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.

Assign responsibility

Be careful

Pick two‚ÄČ*

You can display an error

Label placement

You can change the placement of the label:

labelPlacement

Customized checkbox

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

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 (e.g. aria-label, aria-labelledby, title) via the inputProps property.

<Checkbox
  value="checkedA"
  inputProps={{ 'aria-label': 'Checkbox A' }}
/>

Guidance