Skip to content

🎉 v5 release candidate is out! Head to the v5 documentation to get started.

Edit this page

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.

Assign responsibility

Be careful

Pick two

You can display an error

Label placement

You can change the placement of the label:

Label Placement

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 the inputProps property.
<Checkbox
  value="checkedA"
  inputProps={{ 'aria-label': 'Checkbox A' }}
/>

API