Switch
À quoi il sert
Switch rend un interrupteur natif activé ou désactivé, sans JavaScript, avec un libellé visible.
Quand l’utiliser
- Activer ou désactiver un réglage qui prend effet directement, comme la réception des alertes.
- Afficher un état initial activé avec checked, ou figé avec disabled.
Quand ne pas l’utiliser
- Pour une case parmi plusieurs options à cocher : utiliser Choice de type checkbox.
- Pour une action qui se lance au clic : utiliser Button.
Exemples
Défaut
Erreur
Ce réglage est obligatoire pour continuer.
Désactivé
<Switch id="alerts" name="alerts" label="Recevoir les alertes" />Accessibilité
Clavier
- Tab atteint l’interrupteur ; Espace bascule son état.
- Un interrupteur désactivé est sauté par Tab.
Lecteur d’écran
- Le rôle switch annonce le contrôle comme interrupteur, activé ou désactivé.
- Le libellé relié par for et id donne le nom accessible.
Garanti par le composant
- Case à cocher native avec role="switch" ; l’état checked est porté par le navigateur.
- L’état se lit à la position du curseur, pas seulement à la couleur.
- Les transitions sont désactivées avec prefers-reduced-motion.
À la charge de l’intégrateur
- Donner un libellé qui dit ce que l’interrupteur active, via la prop label.
- Relier un message d’aide ou d’erreur par describedBy.
- Garder le libellé visible : le composant ne le masque pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant du contrôle, relié à son libellé. |
| name (obligatoire) | string | — | Nom envoyé avec le formulaire. |
| label (obligatoire) | string | — | Libellé visible, nom accessible de l'interrupteur. |
| checked | boolean | false | Activé au chargement. |
| disabled | boolean | false | Désactive l'interrupteur. |
| describedBy | string | — | Identifiant(s) du texte d'aide ou d'erreur associé (`aria-describedby`). |
Jetons utilisés
--pp-color-accent--pp-color-bg--pp-color-control--pp-color-fg--pp-color-line--pp-color-muted--pp-color-on-accent--pp-duration-fast--pp-easing-standard--pp-radius-control--pp-size-control-height--pp-size-rule--pp-size-target-min--pp-space-3xs--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.4.1 Utilisation de la couleur, niveau A
- WCAG 4.1.2 Nom, rôle, valeur, niveau A
- WCAG 2.3.3 Animation déclenchée par interaction, niveau AAA
- WCAG 2.4.7 Focus visible, niveau AA : apps/docs/e2e/forms.spec.ts
- WCAG 2.5.8 Taille de la cible (minimum), niveau AA : apps/docs/e2e/forms.spec.ts
- Code source : packages/astro/src/forms/Switch.astro