Select
À quoi il sert
Select rend une liste déroulante native, avec option vide, états d’erreur et de désactivation.
Quand l’utiliser
- Choisir une valeur dans une liste fermée et courte, comme un pays.
- Afficher une option vide à choisir avec placeholder quand aucune valeur n’est pré-remplie.
Quand ne pas l’utiliser
- Pour un choix multiple : Select n’accepte pas multiple, utiliser des Choice de type checkbox.
- Pour deux ou trois options visibles à la fois : préférence pour un groupe de Choice radio.
Exemples
Par défaut
Le Canada n’est pas encore proposé.
Erreur
Erreur : choisissez un pays.
Désactivé
<label for="pays">Pays</label>
<Select id="pays" name="pays" options={[{ value: 'fr', label: 'France' }]} placeholder="Choisir un pays" />Accessibilité
Clavier
- Tab place le focus sur la liste ; les flèches et la frappe restent natives.
- Le placeholder est une option désactivée : il ne peut pas être choisi.
Lecteur d’écran
- Le nom du champ vient du label relié par for et id.
- Avec invalid, le champ est annoncé invalide et le message de describedBy est lu.
Garanti par le composant
- Élément select natif, sans JavaScript ; le chevron est masqué (aria-hidden).
- L’erreur passe aussi par une bordure plus épaisse, en plus de la couleur.
- Les options marquées disabled ne peuvent pas être choisies.
À la charge de l’intégrateur
- Fournir un label dont for est égal à id : le composant n’écrit aucun libellé.
- Ne pas faire du placeholder le seul libellé du champ.
- Écrire le message d’erreur et le référencer par describedBy quand invalid est posé.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant, visé par `<label for>`. |
| name (obligatoire) | string | — | Nom envoyé avec le formulaire. |
| options (obligatoire) | Option[] | — | Options proposées : `{ value, label, disabled? }`. |
| value | string | — | Valeur de l'option sélectionnée. |
| placeholder | string | — | Première option `value=""`, désactivée ; sélectionnée si `value` est absent. |
| required | boolean | false | Choix obligatoire (`required`). |
| disabled | boolean | false | Désactive la liste. |
| describedBy | string | — | Identifiants des textes d'aide ou d'erreur, séparés par des espaces. |
| invalid | boolean | false | Pose `aria-invalid="true"` ; à relier au message d'erreur par `describedBy`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-bg--pp-color-control--pp-color-fg--pp-color-line--pp-color-muted--pp-color-status-failed--pp-color-surface--pp-radius-control--pp-size-control-height--pp-size-focus-width--pp-size-rule--pp-space-3xs--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.1 Information et relations, niveau A
- WCAG 1.4.1 Utilisation de la couleur, 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
- WCAG 3.3.1 Identification des erreurs, niveau A : apps/docs/e2e/forms.spec.ts
- Code source : packages/astro/src/forms/Select.astro