Skip to content

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

Press Enter to start editing

Label

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

Press Enter to start editing

Size

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

Press Enter to start editing

Color

Press Enter to start editing

Icon

Press Enter to start editing

Controlled

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

Press Enter to start editing

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.

Press Enter to start editing

FormGroup

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

Customization

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

Press Enter to start editing

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

When to use

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/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 prop.
<Checkbox
  value="checkedA"
  inputProps={{
    'aria-label': 'Checkbox A',
  }}
/>