Combobox
Champ à suggestions
Un champ modifiable relié à une liste contextuelle qui filtre ou suggère des options pendant la saisie.
Avec vos mots
Ce que les gens décrivent
Alias documentés : autocomplétion, saisie prédictive, sélecteur filtrable
- saisir une ville et choisir dans les suggestions
- une liste recherchable dans un champ de formulaire
- afficher les options correspondantes pendant la saisie
- un champ avec des résultats d'autocomplétion dessous
- filtrer une longue liste avant de sélectionner
- me laisser saisir ou choisir une valeur suggérée
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.
Champ à suggestions
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.
Votre mission
Saisir Porto, parcourir les suggestions avec les flèches, valider la bonne ville, puis effacer et tester l'absence de résultat.
Cas limite à vérifier
Une requête sans correspondance conserve le texte, annonce l'absence d'options et propose un moyen clair de corriger.
Mission
Champ à suggestions - Combobox
Saisir Porto, parcourir les suggestions avec les flèches, valider la bonne ville, puis effacer et tester l'absence de résultat.
La frappe réduit les options disponibles.
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 dans une longue liste qui gagne à être filtrée
- Suggérer des valeurs connues tout en conservant une saisie rapide
À éviter quand
- Une courte liste Select native serait plus simple
- La surface contient 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électionListbox 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
Filtrer les options
La saisie réduit les options disponibles tout en coordonnant le champ et l'option active.
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é.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Combobox au repos
Combobox au repos
Suggestions ouvertes
Suggestions ouvertes
Ville confirmée
Ville confirmée
Transitions d’état
Combobox au repos → Suggestions ouvertes
La saisie d’une requête prise en charge filtre les villes et ouvre la liste de suggestions.
Suggestions ouvertes → Ville confirmée
Entrée, le pointeur ou le toucher confirme la ville prise en charge mise en évidence.
Suggestions ouvertes → Combobox au repos
Échap ferme les suggestions non confirmées et conserve la valeur précédente.
Ville confirmée → Combobox au repos
Le contrôle effacer retire la ville confirmée et rend le focus au champ vide.
Scénarios de test
- Contexte
- Un formulaire de voyage permet de rechercher une ville de départ dans une longue liste internationale.
- Mission
- Saisir Porto, parcourir les suggestions avec les flèches, valider la bonne ville, puis effacer et tester l'absence de résultat.
- État principal
- Les villes correspondantes apparaissent avec la requête et une option active est identifiée visuellement et par programme.
- Cas limite
- Une requête sans correspondance conserve le texte, annonce l'absence d'options et propose un moyen clair de corriger.
Accessibilité
- Role
- combobox controlling a listbox
- 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 focus DOM reste dans le champ tandis que la relation d'option active communique la navigation dans la liste.
- Fermeture
- Échap ferme la liste sans effacer la requête ; la sélection ou un appui extérieur sûr la ferme aussi.
- 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
- L'état développé, le nombre de résultats, l'option active, la valeur choisie, le chargement et l'absence de résultat sont annoncés sans bruit excessif.
- Clavier
- La saisie modifie la requête
- Flèche bas et haut déplacent l'option active
- Entrée valide l'option active
- Échap ferme les suggestions sans effacer
Bindings
Combobox
- implementationKind
- shadcn-base
- nativeElement
- input
- ariaPattern
- combobox with listbox popup
- radixPrimitive
- Non applicable
- shadcnRecipe
- Combobox (Base UI backend)
- runtimeDependency
- @base-ui/react@1.6.0
- packageName
- @base-ui/react
- exportName
- Combobox
- exactVersion
- 1.6.0
- status
- exception
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Base UI coordinates editable input, popup, active option, and selection; Dropdown Menu or an untested Popover composition is not equivalent.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Combobox Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Combobox: combobox, popup, active option, selection, and keyboard interaction guidance.
- Base UI: Combobox
Base UI · documentation · 2026-07-16
Affirmation couverte : Combobox: documented Base UI Combobox input, popup, option, value, and keyboard APIs.
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.