Skip to content
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.

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