Checkbox

A checkbox is the standard control for binary or multi-select choices: terms acceptance, feature toggles, filter inclusion. Zazz styles the native <input type="checkbox"> so the same accessibility, keyboard handling, and form submission you get from the browser is wrapped in a Zazz-themed appearance.

Default

export default function CheckboxDefault() {  return (    <label className="checkbox-group">      <input className="checkbox" type="checkbox" defaultChecked />      <span className="form-label">I agree to the terms</span>    </label>  );}

<label class="checkbox-group">
  <input type="checkbox" class="checkbox" />
  <span class="form-label">Checkbox label</span>
</label>

The checkbox-group wrapper sets up flex alignment with --gap-xs between the input and the label. The checkbox class applies Zazz styling on top of the native input.

Tokens

The checked state targets input:checked:

.checkbox:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}

States

• Unchecked. Border --border, background --input.
• Checked. Border + background switch to --primary. A checkmark appears via background-image or a child SVG.
• Focus. Focus ring outlines the input.
• Disabled. Set disabled on the input. Pointer events drop; contrast lowers.
• Indeterminate. Set via JavaScript: input.indeterminate = true. The checkbox shows a dash; styling matches checked.

Accessibility

• The native <input type="checkbox"> handles keyboard interaction (Space toggles), screen reader announcement, and form submission automatically.
• Wrap each checkbox in a <label> so clicking the label text toggles the input.
• For a group of related checkboxes (filter options, multi-select), wrap the group in <fieldset> with a <legend> describing the group.
• For required boolean inputs (terms acceptance), use required and aria-describedby if the label needs supplementary explanation.

Cross-platform

Where to next