Checkbox

Native <input> checkboxes to toggle items.

Basic checkbox

Checkboxes are styled using .check on the <input> element. Checkboxes have 24px (1.5rem) size to meet WCAG 2.2 standards for touch targets.

<input type="checkbox" id="check1" class="check" checked />

With form field

Wrap .check in .form-field to lay the checkbox and label side by side.

<div class="form-field">
    <input type="checkbox" id="check2" class="check" checked />
    <label for="check2">Example checkbox</label>
</div>

Indeterminate

Indeterminate checkboxes are used to indicate that a checkbox is neither checked nor unchecked. You can set it via JavaScript.

<div class="form-field">
    <input type="checkbox" id="check3" class="check" />
    <label for="check3">Example indeterminate checkbox</label>
</div>

const check3 = document.getElementById("check3");
check3.indeterminate = true;

Disabled

Add disabled attribute in .check to gray out the checkbox as well as the supporting label.

<div class="form-field">
    <input type="checkbox" id="check4" class="check" disabled />
    <label for="check4">Disabled checkbox</label>
</div>
<div class="form-field">
    <input type="checkbox" id="check5" class="check" disabled checked />
    <label for="check5">Disabled checkbox that is checked</label>
</div>