Toggle
BetaL2 — Switch on/off, role="switch" sur '<'button'>' natif. "use client" (bascule d'état). Touch-target ≥44px, jamais couleur seule (position curseur + aria-checked).
import { Toggle } from "@lyra/tokens/components";Playground
NotificationsFonctionnalité bêta
Démo interactive — réglages du playground (props ajustables en direct) à venir.
<Toggle label="Notifications" checked={on} onChange={setOn} />
<Toggle label="Mode sombre" checked={dark} onChange={setDark} showLabel={false} />
<Toggle label="Fonctionnalité bêta" checked={false} disabled onChange={() => {}} />Documentation
- activéNotifications
- désactivéNotifications
- disabledBêta
label, checked, onChange, disabled, showLabel<Toggle label="Notifications" checked={on} onChange={setOn} />
<Toggle label="Mode sombre" checked={dark} onChange={setDark} showLabel={false} />
<Toggle label="Fonctionnalité bêta" checked={false} disabled onChange={() => {}} />- role='switch' + aria-checked — pattern WAI-ARIA Switch (bascule immédiate, pas une sélection en attente).
- '<'button'>' natif — nom accessible + clavier (Entrée/Espace) gratuits.
- label toujours requis (texte visible ou aria-label si showLabel=false) — jamais de switch sans nom accessible.
- disabled : attribut natif, retiré du tab order, onChange jamais appelé.
- État porté par la position du curseur ET aria-checked — jamais la couleur seule (WCAG 1.4.1).
- Touch-target ≥ 44px sur toute la zone cliquable (piste + label).