Checkbox

Sélection binaire indépendante — cocher/décocher une option ou marquer une tâche faite. Forme carrée par convention (NN/g) : le rond signale un bouton radio. Le libellé est cliquable et la cible tactile fait ≥ 24px (WCAG 2.5.8). Independent binary selection — check/uncheck an option or mark a task done. Square shape by convention (NN/g): round signals a radio button. The label is clickable and the touch target is ≥ 24px (WCAG 2.5.8).

ÉtatsStates

Default · Checked · IndeterminateDefault · Checked · Indeterminate

Recevoir la newsletterReceive the newsletter Notifications activéesNotifications enabled Tout sélectionner (partiel)Select all (partial)

DésactivéDisabled

Option indisponibleOption unavailable Option verrouilléeLocked option

Règles absoluesAbsolute rules

Forme carrée — jamais ronde (le rond = radio, NN/g)Square shape — never round (round = radio, NN/g)
Libellé cliquable (case ou texte) + cible ≥ 24pxClickable label (box or text) + ≥ 24px target
<input type="checkbox"> natif — rôle et clavier gérés nativementNative <input type="checkbox"> — role and keyboard handled natively
Jamais de case pré-cochée pour un consentement (dark pattern)Never a pre-checked consent box (dark pattern)
Jamais de libellé en négation (« Ne pas m'envoyer… »)Never a negated label ("Don't send me…")

Tokens de composantComponent tokens

Token CSS	Référence sémantiqueSemantic reference	Valeur résolueResolved value
`--agtc-checkbox-default-background`	`semantic.color.background.surface`	#ffffff
`--agtc-checkbox-default-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-checkbox-default-border-hover`	`semantic.color.action.primary`	#007a68
`--agtc-checkbox-default-border-focus`	`semantic.color.border.focus`	#007a68
`--agtc-checkbox-default-fill`	`semantic.color.action.primary`	#007a68
`--agtc-checkbox-default-fill-hover`	`semantic.color.action.primary-hover`	#0d3d38
`--agtc-checkbox-default-check`	`semantic.color.text.on-action`	#ffffff
`--agtc-checkbox-default-label`	`semantic.color.text.primary`	#202020
`--agtc-checkbox-default-radius`	`semantic.radius.control`	6px

AccessibilitéAccessibility

Élément accessible : <input type="checkbox"> natif dans un <label> englobantAccessible element: native <input type="checkbox"> inside a wrapping <label>
Focus visible : outline sur la case via :focus-visibleVisible focus: outline on the box via :focus-visible
Indéterminé : propriété DOM indeterminate → aria-checked="mixed"Indeterminate: DOM indeterminate property → aria-checked="mixed"
Cible tactile ≥ 24×24px (WCAG 2.5.8)Touch target ≥ 24×24px (WCAG 2.5.8)

ImplémentationImplementation

<!-- Basique -->
<agtc-checkbox label="Recevoir la newsletterReceive the newsletter" name="newsletter"></agtc-checkbox>

<!-- Cochée -->
<agtc-checkbox label="Notifications activéesNotifications enabled" checked></agtc-checkbox>

<!-- Parent d'un groupe « tout cocher » -->
<agtc-checkbox label="Tout sélectionnerSelect all" indeterminate></agtc-checkbox>

<!-- Texte en slot -->
<agtc-checkbox>J'accepte lesI accept the <a href="/cgu">conditionsterms</a></agtc-checkbox>

DOs et DON'TsDOs and DON'Ts

À faireDo

Utiliser une checkbox pour une sélection indépendante (0–N)Use a checkbox for independent selection (0–N)
Formuler le libellé positivementPhrase the label positively
Écouter agtc-change pour réagir à la basculeListen to agtc-change to react to toggling

À éviterDon't

Forme ronde — confusion avec un radioRound shape — confusion with a radio
Checkbox pour un réglage à effet immédiat — préférer un toggleCheckbox for an immediate-effect setting — prefer a toggle
Case pré-cochée pour un consentementPre-checked consent box

UX Patterns Reference

Patterns approved by the Design System Lead via the ux-pattern-review workflow (see .claude/rules/ux-patterns-sources.md and ADR-036). Decision: all approved.

Pattern	Source	Applied	Justification
Checkbox (not toggle) for an independent item	NN/g — checkbox vs toggle	✅	Independent 0–N selection, not an immediate-effect setting
Square shape (a circle signals a radio)	NN/g — checkboxes	✅	Usability convention; deliberate departure from the round ToDo mockup
Clickable label (box or text) — Fitts's law	NN/g — checkboxes · IxDF	✅	Implicit `<label>` wrapping box + text
Touch target ≥ 24×24px	IxDF — touch targets	✅	`.root` min-height 24px (WCAG 2.5.8)
Complete visible states (default/hover/focus/checked/disabled)	NN/g — checkboxes	✅	Affordance and immediate feedback
Positively phrased label (no negation)	NN/g — checkboxes	✅	`label` writing rule (documented anti-pattern)
No pre-checked consent (anti-dark-pattern)	IxDF — deceptive patterns	✅	`checked` defaults to `false`
Native ARIA semantics (`role=checkbox`, `aria-checked`)	NN/g — checkboxes	✅	Native `<input type="checkbox">`, `indeterminate` → `mixed`