Checkbox

Native checkbox with a glass visual control — pair with a label for multi-select options. Control and label are vertically centered; add .items-start when the label wraps to multiple lines.

Preview

Live

<label class="checkbox">
  <input class="checkbox__input" type="checkbox" name="notify" value="email" checked />
  <span class="checkbox__control" aria-hidden="true"></span>
  <span class="checkbox__label">Email updates</span>
</label>

Variants

Default

Unchecked glass control with label.

Checked

Filled system-blue with checkmark.

Invalid

.is-invalid + aria-invalid for error styling.

Disabled

Native disabled — reduced opacity.

Accessibility

  • Prefer wrapping with a <label> so the text activates the control.
  • The visual .checkbox__control is decorative — aria-hidden="true".
  • On error, set aria-invalid="true" and link help text with aria-describedby.
  • Focus rings appear on the control via :focus-visible — keep them.
  • Disabled options stay in the tab order only if needed; otherwise omit them.

API

HTML classes

Class Description
.checkbox Root label / wrapper.
.checkbox__input Native type="checkbox" (visually hidden).
.checkbox__control Glass square indicator.
.checkbox__label Visible label text.
.is-invalid Error border / ring on root or input.
.selection-stack Vertical stack of selection controls.

React props

From src/core/Checkbox.tsx — extends native InputHTMLAttributes<HTMLInputElement> (minus type).

Prop Type Default Description
invalid boolean false Applies .is-invalid and aria-invalid.
children ReactNode — When set, wraps in a <label> with label text.
disabled boolean — Native disabled state.
className string — Merged onto the root wrapper.
id / name / checked native — Passed through to the input.