Skip to content


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 defaultChecked inputProps={{ 'aria-label': 'checked' }} />
<Checkbox inputProps={{ 'aria-label': 'uncontrolled' }} />
<Checkbox disabled inputProps={{ 'aria-label': 'disabled' }} />
<Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked' }} />


You can provide a label to the Checkbox thanks to the FormControlLabel component.

  <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled" />


Use the size prop or customize the font size of the svg icons to change the size of the checkboxes.

<Checkbox defaultChecked inputProps={{ 'aria-label': 'small' }} size="small" />
<Checkbox defaultChecked inputProps={{ 'aria-label': 'normal' }} />
  inputProps={{ 'aria-label': 'large' }}
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}



  icon={<FavoriteBorder />}
  checkedIcon={<Favorite />}
  inputProps={{ 'aria-label': 'favorite' }}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
  inputProps={{ 'aria-label': 'bookmarked' }}


You can control the checkbox with the checked and onChange props:

  inputProps={{ 'aria-label': 'controlled' }}


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.

      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}

⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.


FormGroup is a helpful wrapper used to group selection control components.

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.

<StyledCheckbox />
<StyledCheckbox defaultChecked />
<StyledCheckbox disabled />

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

When to use



  • 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 prop.
    'aria-label': 'Checkbox A',