Checkbox

A native <input type="checkbox"> for toggling options.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/checkbox.css" />

Default

<input type="checkbox" />

Checked

<input type="checkbox" checked />

With label

Wrap in a <label> to make the text clickable.

Accept terms and conditions Subscribe to newsletter

<label>
  <input type="checkbox" checked />
  Accept terms and conditions
</label>
<label>
  <input type="checkbox" />
  Subscribe to newsletter
</label>

Disabled

Disabled Disabled checked

<label>
  <input type="checkbox" disabled />
  Disabled
</label>
<label>
  <input type="checkbox" disabled checked />
  Disabled checked
</label>

Indeterminate

A third state shown when only some child options are selected. Must be set via JavaScript: checkbox.indeterminate = true.

Select all

<label>
  <input type="checkbox" id="select-all" />
  Select all
</label>

<script>
  document.getElementById("select-all").indeterminate = true;
</script>

API reference

Type	Classes / attributes	What it does
State	`el.indeterminate = true`	Shows a dash. Set the property in JavaScript
Disabled	`[disabled]`	Blocks the checkbox and fades it with its label