ComponentsSpec

Checkbox

Native inputs, restyled with appearance:none - forms, labels and keyboard come from the platform.

Include case studies Include experiments Some selected Disabled

Show code

<label class="check"><input type="checkbox" checked> Include case studies</label>
<label class="check"><input type="checkbox"> Include experiments</label>
<label class="check"><input type="checkbox" class="d-indet"> Some selected</label>
<label class="check"><input type="checkbox" disabled> Disabled</label>

Guidelines

The whole label is the target; the row is 44px tall even though the box is 18.
Use a checkbox for independent choices, a Radio group for one-of-many, a Switch for a setting that applies immediately.
Indeterminate is set from script (el.indeterminate = true), never from markup.