Checkbox

A checkbox lets users select or clear an option independently of other choices. Add checked to select an option initially.

#Native examples

Set the indeterminate DOM property with JavaScript for a partial selection. For validation errors, use aria-invalid="true" and connect the message with aria-describedby.

<label>
  <input type="checkbox" checked />
  Include updates
</label>
<label>
  <input type="checkbox" />
  Remember preferences
</label>
<label>
  <input type="checkbox" disabled />
  Unavailable option
</label>
<label>
  <input id="checkbox-mixed" type="checkbox" />
  Select all
</label>
<div>
  <label>
    <input type="checkbox" aria-invalid="true" aria-describedby="checkbox-error" />
    Accept the terms
  </label>
  <small id="checkbox-error">Accept the terms to continue.</small>
</div>

document.getElementById('checkbox-mixed').indeterminate = true;

#Extension classes

The Full build adds trace-small and trace-large. Medium uses the default size.

<label>
  <input type="checkbox" class="trace-small" />
  Small
</label>
<label>
  <input type="checkbox" />
  Medium
</label>
<label>
  <input type="checkbox" class="trace-large" />
  Large
</label>

See CSS variables for styling.