Checkboxes

A checkbox is drawn with CSS, so it looks the same on every platform and follows the active theme. Put it inside a label and the whole label is clickable.

<fieldset>
  <legend>Languages you speak:</legend>
  <label>
    <input type="checkbox" name="english" checked />
    English
  </label>
  <label>
    <input type="checkbox" name="french" />
    French
  </label>
  <label>
    <input type="checkbox" name="portuguese" />
    Portuguese
  </label>
</fieldset>

Indeterminate#

:indeterminate shows a minus sign. HTML has no attribute for it, so set the property from script.

<label>
  <input type="checkbox" id="all" />
  Select all
</label>
<script>
  document.getElementById("all").indeterminate = true;
</script>

Validation#

aria-invalid colors the border, and the fill once checked.

<label>
  <input type="checkbox" name="ok" checked aria-invalid="false" />
  Accepted
</label>
<label>
  <input type="checkbox" name="bad" checked aria-invalid="true" />
  Rejected
</label>

See Validation states.

Accessibility#

Wrap the input in a label or link them with for and id. Use a fieldset with a legend to name a group of checkboxes. For a toggle, see Switch.

Customization#

The border is 0.125rem wide. Checked checkboxes use the primary background and border from the active theme. The checkmark is --pico-icon-checkbox and the indeterminate icon is --pico-icon-minus.