Toggle

Interrupteur on/off à effet immédiat — le changement s'applique instantanément, sans bouton « Enregistrer ». L'état est signalé par la position du curseur (indicateur non-couleur, WCAG 1.4.1). Immediate-effect on/off switch — the change applies instantly, no "Save" button. State is signaled by the knob position (non-color indicator, WCAG 1.4.1).

ÉtatsStates

Off · On

Mode sombreDark mode Notifications par e-mailEmail notifications

DésactivéDisabled

SynchronisationSync Sauvegarde autoAuto-save

Checkbox ou toggle ?Checkbox or toggle?

	Checkbox	Toggle
EffetEffect	À la soumissionOn submit	ImmédiatImmediate
UsageUse	Sélection 0–N dans un formulaire0–N selection in a form	Réglage on/off instantanéInstant on/off setting
ExempleExample	« J'accepte les CGU »	« Mode sombre »"Dark mode"

Règles absoluesAbsolute rules

Effet immédiat — jamais dans un formulaire soumis ensembleImmediate effect — never in a submitted form
État signalé par la position (pas la couleur seule)State signaled by position (not color alone)
role="switch" natif, clavier EspaceNative role="switch", Space key
Libellé interrogatif — préférer un libellé concisInterrogative label — prefer a concise one

Tokens de composantComponent tokens

Token CSS	RéférenceReference	Valeur résolueResolved value
`--agtc-toggle-default-track-off`	`primitive.color.gray.9`	#8d8d8d
`--agtc-toggle-default-track-off-hover`	`primitive.color.gray.10`	#838383
`--agtc-toggle-default-track-on`	`semantic.color.action.primary`	#007a68
`--agtc-toggle-default-track-on-hover`	`semantic.color.action.primary-hover`	#0d3d38
`--agtc-toggle-default-knob`	`semantic.color.background.surface`	#ffffff
`--agtc-toggle-default-border-focus`	`semantic.color.border.focus`	#007a68
`--agtc-toggle-default-label`	`semantic.color.text.primary`	#202020

ImplémentationImplementation

<agtc-toggle label="Notifications par e-mailEmail notifications" name="email-notif"></agtc-toggle>
<agtc-toggle label="Mode sombreDark mode" checked></agtc-toggle>

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
`role="switch"` + `aria-checked`	NN/g — toggle switch	✅	Native `<input type="checkbox" role="switch">`
Immediate effect (no submit)	NN/g	✅	`agtc-change` emitted on toggle
State by knob position (not color alone)	NN/g	✅	Knob slides left/right (WCAG 1.4.1)
Delimited knob (contrast ≥ 3:1)	NN/g	✅	White + shadow, gray.9 track (WCAG 1.4.11)
Concise label describing the "on" state, frontloaded	NN/g	✅	`label` writing rule
Clickable label + target ≥ 24px	NN/g · IxDF	✅	Enclosing `<label>`, `min-height: 24px`
Binary only	NN/g	✅	Otherwise radio/checkbox