Components · Form

Checkbox

A checkbox lets the user turn one or more options on or off, independently of each other. The choice is saved when the form is submitted.

How to add a checkbox to a page. The file is components/css/checkbox.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules, and never write a parallel version of the checkbox.

StepWhat to do
1. Link<link rel="stylesheet" href="/components/css/checkbox.css">. Both templates (template.html, mypages/mypages-template.html) already have it.
2. MarkupA <label class="form-checkbox-item"> around an <input type="checkbox"> and a <span> with the label text.
3. Dark surfaceAdd form-checkbox-item--dark on surface-100 or surface-80. Never the light markup on a dark surface.
4. MixedSet input.indeterminate = true in JavaScript. It cannot be set in HTML.

Checkbox

Copy the markup you need. Hover and focus come from :hover and :focus-visible; the [data-state] selectors in the CSS exist only so the documentation can force a state.

Tiles

Tiles have no visible label, so aria-label is required. Several can be chosen with checkbox; on a product page where only one can be chosen, use radio with the same markup.

Definition Checkbox

To be added. No such sibling exists in Figma yet.

API

Classes

ClassUse
form-checkbox-itemThe label around the input and the text. Large, light.
form-checkbox-item--smSmall size.
form-checkbox-item--darkDark mode, for dark surfaces.
form-checkbox-item--menu, cb-arrowInline menu: the box plus a dropdown arrow, no label.
check-iconOn a table cell: a read-only checkmark.
form-checkbox-tile, --image, --number, --rowTiles. Inside: form-checkbox-tile__box, __swatch (with --swatch), __text, __count.

Things to know

  • The box is the native input with appearance: none. The checkmark and dash are SVG data URIs, so no image file is loaded.
  • A label that contains an input is enough: no for/id pair is needed.
  • Breakpoint: the Large label is 16/22 below 769px and 17/24 from 769px. The CSS does this by itself.
  • The [data-state="hover"] and [data-state="focus"] selectors do nothing outside the documentation pages.
  • A checkbox does not submit when it is unchecked: handle that on the server if a value is needed.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/checkbox.css)