Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list.

A list of burger additions represented with checkboxes

View interactive demo inline.

Open interactive demo in new tab.

Checkboxes may be standalone, pre-checked, or indeterminate.

<md-checkbox touch-target="wrapper"></md-checkbox>
<md-checkbox touch-target="wrapper" checked></md-checkbox>
<md-checkbox touch-target="wrapper" indeterminate></md-checkbox>

Associate a label with a checkbox using the <label> element.

  <md-checkbox touch-target="wrapper"></md-checkbox>
  Checkbox one

<md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
<label for="checkbox-two">Checkbox two</label>

Add an aria-label attribute to checkboxes without labels or checkboxes whose labels need to be more descriptive.

<md-checkbox aria-label="Select all checkboxes"></md-checkbox>

  <md-checkbox aria-label="Agree to terms and conditions"></md-checkbox>

checkboxes are not automatically labelled by <label> elements and always need an aria-label. See b/294081528.

Checkbox supports Material theming and can be customized in terms of color and shape.

TokenDefault value
  :root {
    /* System tokens */
    --md-sys-color-primary: #006a6a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-surface-variant: #3f4948;

    /* Component tokens */
    --md-checkbox-container-shape: 0px;

<md-checkbox touch-target="wrapper"></md-checkbox>
<md-checkbox touch-target="wrapper" checked></md-checkbox>
checkedcheckedbooleanfalseWhether or not the checkbox is selected.
disableddisabledbooleanfalseWhether or not the checkbox is disabled.
indeterminateindeterminatebooleanfalseWhether or not the checkbox is indeterminate.
requiredrequiredbooleanfalseWhen true, require the checkbox to be selected when participating in form submission.
valuevaluestring'on'The value of the checkbox that is submitted with a form when selected.
checkValidityNonebooleanChecks the checkbox's native validation and returns whether or not the element is valid.
If invalid, this method will dispatch the invalid event.
reportValidityNonebooleanChecks the checkbox's native validation and returns whether or not the element is valid.
If invalid, this method will dispatch the invalid event.
The validationMessage is reported to the user by the browser. Use setCustomValidity() to customize the validationMessage.
setCustomValidityerrorvoidSets the checkbox's native validation error message. This is used to customize validationMessage.
When the error is not an empty string, the checkbox is considered invalid and validity.customError will be true.
IntroductionQuick StartRoadmapSupportBundle Sizes
Material ThemingColorTypography
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field