Checkbox

atoms

Binary checkbox with label. 18×18 box, 2px teal border, teal-50 fill when checked. Indeterminate state supported.

ARIA Role: checkbox

Demo

I agree to the terms of serviceSubscribe to marketing emailsAlready selected

Disabled

Props

Prop	Type	Required	Default
`checked`	`boolean \| 'indeterminate'`	Yes	`—`
`onChange`	`(checked: boolean) => void`	Yes	`—`
`label`	`string`	Yes	`—`

TypeScript Interface

interface CheckboxProps {
  checked: boolean | 'indeterminate';
  onChange: (checked: boolean) => void;
  label: string;
  disabled?: boolean;
  required?: boolean;
  error?: string;
  id?: string;
}

Assertions (NASA Rule 5)

[type]checked and onChange required (controlled)(NASA Rule 5)
[aria]role='checkbox' aria-checked reflects state; label htmlFor binds correctly(WCAG 4.1.2)

Usage

Import

import { Checkbox } from '@epasslive/design-system'

Basic

<Checkbox />

With Variants

<Checkbox variant="primary" size="md" />