Checkbox

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

• Follows: Checkboxes - Material Design 3
• Inherits: Checkbox

Interactive Demo

Usage

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

<md-checkbox></md-checkbox>
<md-checkbox checked></md-checkbox>
<md-checkbox indeterminate></md-checkbox>

<div>
  <label>
    <md-checkbox id="parent-checkbox"></md-checkbox>
    Parent Checkbox
  </label>
  <ul style="margin: 0; list-style: none">
    <li>
      <label>
        <md-checkbox
          class="child-checkbox"
          data-parent="parent-checkbox"
        ></md-checkbox>
        Child Checkbox 1
      </label>
    </li>
    <li>
      <label>
        <md-checkbox
          class="child-checkbox"
          data-parent="parent-checkbox"
        ></md-checkbox>
        Child Checkbox 2
      </label>
    </li>
    <li>
      <label>
        <md-checkbox
          class="child-checkbox"
          data-parent="parent-checkbox"
        ></md-checkbox>
        Child Checkbox 3
      </label>
    </li>
  </ul>
</div>

<script>
  const parentCheckbox = document.getElementById('parent-checkbox');
  const childCheckboxes = document.querySelectorAll('.child-checkbox');
  parentCheckbox.addEventListener('change', () => {
    const isChecked = parentCheckbox.checked;
    childCheckboxes.forEach((child) => {
      child.checked = isChecked;
    });
  });
  childCheckboxes.forEach((child) => {
    child.addEventListener('change', () => {
      const allChecked = Array.from(childCheckboxes).every((cb) => cb.checked);
      const someChecked = Array.from(childCheckboxes).some((cb) => cb.checked);

      parentCheckbox.checked = allChecked;
      parentCheckbox.indeterminate = !allChecked && someChecked;
    });
  });
</script>

Label

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

<label>
  <md-checkbox></md-checkbox>
  Checkbox one
</label>

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

Accessibility

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>

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

Note: checkboxes are not automatically labelled by <label> elements and always need an aria-label.

Properties