Select
Liste de sélection
Un contrôle de formulaire fermé qui ouvre une liste prédéfinie et conserve une valeur sélectionnée sans saisie libre.
Avec vos mots
Ce que les gens décrivent
Alias documentés : champ de sélection, sélecteur d'option, liste de choix
- un champ qui ouvre une liste fixe de pays
- choisir une option sans saisir de texte
- une liste fermée pour choisir une valeur
- le champ de formulaire avec une flèche vers le bas
- sélectionner une taille parmi des choix connus
- un sélecteur adapté au téléphone pour une courte liste
Essayer
Choisir dans une liste
Comparer les trois comportements
Scénario comparatif partagé : Un formulaire demande à l'utilisateur de choisir une valeur dans un ensemble d'options connu avant de continuer.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Liste de sélection
Select propose une liste fixe fermée sans filtrage textuel ; Combobox inclut une requête modifiable, tandis que Listbox garde les options visibles.
Votre mission
Choisir le Portugal au pointeur et au clavier, puis confirmer que la valeur du formulaire est identique.
Cas limite à vérifier
L'option indicative obligatoire ne peut pas être envoyée comme pays valide et son erreur reste reliée au champ.
Mission
Liste déroulante native - Select
Choisir le Portugal au pointeur et au clavier, puis confirmer que la valeur du formulaire est identique.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
À utiliser quand
- Choisir une valeur connue dans une liste courte ou moyenne
- Conserver le sélecteur mobile natif est utile
À éviter quand
- L'utilisateur doit rechercher dans une longue liste
- Plusieurs options doivent rester visibles pour comparaison
Comparer les concepts proches
Combobox accepte une requête modifiable et la coordonne avec des options ; Select est fermé et fixe, tandis que Listbox est une collection d'options toujours visible.
Champ à suggestionsListbox garde les options visibles dans un contrôle composite ; Select les masque dans un sélecteur, et Combobox ajoute une requête modifiable.
Liste de choix visibleBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Basculer à l'activation
Activer le déclencheur ouvre la surface, puis peut la refermer au second appui.
Sélectionner une valeur
Choisir une option remplace la valeur précédente et expose l'état sélectionné.
Parcourir les options
Les flèches déplacent l'option active, et la sélection est annoncée indépendamment du focus.
États
Select replié
Select replié
Select développé
Select développé
Transitions d’état
Select replié → Select développé
Le contrôle est activé au pointeur, au toucher, avec Entrée, Espace ou une flèche d’ouverture.
Select développé → Select replié
Une option valide est confirmée, ou Échap ferme la liste sans changer la valeur.
Scénarios de test
- Contexte
- Un formulaire d'expédition demande un pays de livraison dans une liste fixe de pays pris en charge.
- Mission
- Choisir le Portugal au pointeur et au clavier, puis confirmer que la valeur du formulaire est identique.
- État principal
- La liste native étiquetée affiche le pays actuel et ouvre le sélecteur d'options de la plateforme.
- Cas limite
- L'option indicative obligatoire ne peut pas être envoyée comme pays valide et son erreur reste reliée au champ.
Accessibilité
- Role
- native select
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le contrôle natif conserve un seul arrêt de focus et délègue le parcours des options à la plateforme.
- Fermeture
- Le sélecteur de la plateforme se ferme après sélection, annulation ou Échap, sans perdre la valeur précédente lors d'une annulation.
- Scroll
- Une longue collection d'options défile sans déplacer la page située derrière, et l'option active ou sélectionnée reste visible.
- Annonce
- Le libellé, l'état obligatoire, la valeur actuelle, l'état désactivé et l'erreur sont exposés par la sémantique native.
- Clavier
- Tab place le focus sur la liste
- Les touches de la plateforme ouvrent et parcourent les options
- La touche de validation choisit une valeur
Bindings
select
- implementationKind
- native
- nativeElement
- select
- ariaPattern
- native select
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : The native picker preserves platform behavior and is preferred unless customization requirements justify a separately tested pattern.
Vérifier la source du binding
Sources
- WHATWG HTML: The select element
WHATWG · standard · 2026-07-16
Affirmation couverte : Select: native select semantics, option selection, form participation, and platform interaction.
- WCAG 2.2: Focus Appearance
W3C WAI · standard · 2026-07-16
Affirmation couverte : Select: WCAG focus appearance requirements used to qualify visible keyboard focus.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.