Checkbox

Implemented

Tri-state checkbox with label. 18×18 box, 2px teal border, solid teal fill with a white check glyph when checked. Indeterminate state supported. Use for selections; use Switch for immediate on/off settings.

Categoryatoms

Sourcepatterns/atoms/checkbox.html

AI HintSingle binary or tri-state selection: checked accepts boolean or 'indeterminate', and the whole label row is the tap target (44px). For settings that apply immediately on toggle, use the Switch atom instead.

Tri-state checkable control. Supports required + error states and an accessible label association. FR-CA: Case à cocher à trois états.

Checkbox

Interactive atom (Family 1 — Tier 1)

Always renders a visible label and an aria-described error message. Use indeterminate when a parent row has partial selection. For binary settings that apply immediately, use Switch instead.

J'accepte les conditions

Recevoir l'infolettre

Sélection partielle

Champ requis

Ce champ est obligatoire

This component supports light and dark mode.

Interactive demo

J'accepte les conditions

Recevoir l'infolettre

accepted = false · newsletter = true

Usage

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

const [accepted, setAccepted] = useState(false)

<Checkbox checked={accepted} onChange={setAccepted} label="J'accepte les conditions" required />

Accessibility

Label is associated with the input via a generated id + htmlFor.
When error is supplied the input gets aria-describedby.
Indeterminate is set via the native indeterminate property, which assistive tech announces as aria-checked="mixed".
Required state renders an asterisk and aria-required.

Props

Prop

Type

Default

Description

checked*

boolean | 'indeterminate'

—

Current state.

onChange*

(checked: boolean) => void

—

Toggle handler.

label*

string

—

Visible and announced label.

disabled

boolean

false

Disables interaction.

required

boolean

false

Marks the field required.

error

string

—

Validation message announced via aria-describedby.

name

string

—

Form field name.

id

string

—

Override the auto-generated id.

className

string

—

Extra classes appended to the root element.

Props

Preview

Checkbox

Prop

Type

Required

Default

Description

checked

boolean | 'indeterminate'

Required

—

Controlled state; 'indeterminate' renders the dash glyph.

onChange

(checked: boolean) => void

Required

—

Fires on user toggle with the plain boolean value.

label

string

Required

—

Visible label, associated via htmlFor.

disabled

boolean

Optional

false

Disables interaction.

required

boolean

Optional

false

Sets aria-required and renders a visible asterisk.

error

string

Optional

—

Validation message; sets aria-invalid + aria-describedby.

id

string

Optional

useId()

Overrides the auto-generated input id.

name

string

Optional

—

Native form field name.

className

string

Optional

—

Extra classes appended to the root element.

Quick use:<Checkbox />

Accessibility

ARIA rolecheckbox

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Checkbox checked={accepted} onChange={setAccepted} label="Accept terms" required />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms