Listbox
Liste de choix visible
Une liste toujours visible d'options nommées où le focus clavier et la sélection sont gérés comme un contrôle composite.
Avec vos mots
Ce que les gens décrivent
Alias documentés : liste d'options, liste de sélection, liste multisélection
- garder tous les choix visibles dans une boîte
- une liste sélectionnable qui ne se replie pas
- utiliser les flèches dans les options visibles
- choisir un élément dans une liste permanente
- une boîte d'options avec la ligne choisie en évidence
- afficher plusieurs choix à la fois pour comparer
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 choix visible
Listbox garde les options visibles dans un contrôle composite ; Select les masque dans un sélecteur, et Combobox ajoute une requête modifiable.
Votre mission
Focaliser la liste, atteindre 30 derniers jours avec les flèches, sélectionner et vérifier que l'état reste visible.
Cas limite à vérifier
Une période personnalisée désactivée est annoncée, ignorée selon le modèle clavier et jamais confondue avec la valeur choisie.
Mission
Liste de choix visible - Listbox
Focaliser la liste, atteindre 30 derniers jours avec les flèches, sélectionner et vérifier que l'état reste visible.
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
- Un petit ensemble doit rester visible pour comparaison
- Le clavier bénéficie d'une navigation rapide entre options
À éviter quand
- L'espace manque et un Select natif suffit
- Les éléments sont des commandes plutôt que des valeurs
Comparer les concepts proches
Select propose une liste fixe fermée sans filtrage textuel ; Combobox inclut une requête modifiable, tandis que Listbox garde les options visibles.
Liste de sélectionCombobox 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 à suggestionsBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Parcourir les options
Les flèches déplacent l'option active, et la sélection est annoncée indépendamment du focus.
Sélectionner une valeur
Choisir une option remplace la valeur précédente et expose l'état sélectionné.
États
Période par défaut sélectionnée
Période par défaut sélectionnée
30 derniers jours sélectionnés
30 derniers jours sélectionnés
Transitions d’état
Période par défaut sélectionnée → 30 derniers jours sélectionnés
La navigation par flèches atteint 30 derniers jours et la commande de sélection le confirme.
30 derniers jours sélectionnés → Période par défaut sélectionnée
La navigation revient à la période par défaut et la commande de sélection la confirme.
Scénarios de test
- Contexte
- Un générateur de rapports affiche cinq périodes visibles et permet d'en choisir exactement une.
- Mission
- Focaliser la liste, atteindre 30 derniers jours avec les flèches, sélectionner et vérifier que l'état reste visible.
- État principal
- Toutes les périodes restent visibles, avec l'option active et la valeur sélectionnée clairement distinguées.
- Cas limite
- Une période personnalisée désactivée est annoncée, ignorée selon le modèle clavier et jamais confondue avec la valeur choisie.
Accessibilité
- Role
- listbox with option children
- 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
- La listbox est un seul arrêt de tabulation ; l'option active et l'option sélectionnée restent distinctes par programme.
- Fermeture
- La liste toujours visible ne se ferme pas ; la quitter avec Tab conserve la sélection validée.
- 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 nom de la liste, le nombre d'options, l'option active, la sélection, l'état désactivé et le mode multiple sont exposés.
- Clavier
- Tab entre une fois dans le contrôle composite
- Les flèches déplacent l'option active
- Espace sélectionne si le focus ne suffit pas
- Début et Fin atteignent les limites
Bindings
select[size]
- implementationKind
- native
- nativeElement
- select[size]
- ariaPattern
- listbox
- 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 : A native sized select is used for the simple specimen. A custom ARIA listbox requires full option navigation and selection behavior.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Listbox Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Listbox: listbox and option semantics plus focus, selection, and keyboard interaction guidance.
- WHATWG HTML: The select element
WHATWG · standard · 2026-07-16
Affirmation couverte : Listbox: native select semantics, option selection, form participation, and platform interaction.
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.