Choice
À quoi il sert
Choice rend une case à cocher ou un bouton radio natif, suivi d’un libellé cliquable.
Quand l’utiliser
- Cocher un réglage indépendant, ou plusieurs options à la fois, avec type="checkbox".
- Choisir une seule valeur dans un groupe fermé, avec type="radio" dans un fieldset.
Quand ne pas l’utiliser
- Pour un réglage qui prend effet tout de suite : préférence pour Switch.
- Pour un choix parmi de nombreuses options : préférence pour Select.
Exemples
Par défaut
Groupe de boutons radio
Un groupe s'écrit dans un fieldset avec un legend : le lecteur d'écran annonce la question avant chaque choix.
Erreur
Le message d'erreur est un élément à part, relié au contrôle par describedBy.
Cochez cette case pour continuer.
Désactivé
<Choice type="checkbox" id="news" name="news" value="oui" label="Recevoir les notes" />Accessibilité
Clavier
- Tab atteint chaque case ou bouton radio, dans l’ordre du document.
- Espace coche une case ; les flèches changent le bouton radio du groupe.
Lecteur d’écran
- Le libellé relié par for et id donne le nom accessible du contrôle.
- Dans un fieldset, le legend est annoncé avant les choix du groupe.
Garanti par le composant
- Contrôle natif et libellé, sans JavaScript et sans texte en dur.
- Le libellé occupe une zone au moins égale à la taille minimale de cible.
- Le focus visible est hérité de @paulperigault/css.
À la charge de l’intégrateur
- Envelopper un groupe de boutons radio dans un fieldset et un legend.
- Donner à chaque radio d’un groupe le même name et un id distinct.
- Relier le message d’erreur par describedBy quand le choix est refusé.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| type (obligatoire) | "checkbox" | "radio" | — | Case à cocher (choix multiples) ou bouton radio (un seul choix par `name`). |
| id (obligatoire) | string | — | Identifiant du contrôle, relié à son libellé. |
| name (obligatoire) | string | — | Nom envoyé avec le formulaire. |
| value (obligatoire) | string | — | Valeur envoyée quand le choix est coché. |
| label (obligatoire) | string | — | Libellé visible, cliquable, nom accessible du contrôle. |
| checked | boolean | false | Coché au chargement. |
| disabled | boolean | false | Désactive le contrôle. |
| describedBy | string | — | Identifiant(s) de l'aide ou du message d'erreur associé (`aria-describedby`). |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-muted--pp-size-control-height--pp-size-target-min--pp-space-xs
Preuves et décisions
- WCAG 1.3.1 Information et relations, niveau A
- WCAG 4.1.2 Nom, rôle, valeur, niveau A
- 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
- Tests unitaires : packages/astro/test/Choice.test.ts
- Code source : packages/astro/src/forms/Choice.astro