Comparaison comportementale
Combobox vs Liste de sélection
Différence décisive
La Combobox coordonne une surface associée et peut accepter une saisie libre ; la Liste de sélection est un contrôle natif dont la valeur vient uniquement d’options prédéfinies.
Critères de choix, liens et sources
- ComboboxChoisis Combobox si l’utilisateur doit filtrer, saisir ou parcourir une surface plus riche qu’une liste fermée.Ouvrir la fiche Combobox
- Liste de sélectionChoisis Liste de sélection si les valeurs sont connues et peu nombreuses et que le natif suffit.Ouvrir la fiche Liste de sélection
Voir les neuf dimensionsVoir les sources
Choisir dans une liste
Essayer
La personne choisit-elle une valeur native, filtre-t-elle en saisissant ou navigue-t-elle dans une liste ?
Combobox
Contexte commun aux essais
Un formulaire demande à l'utilisateur de choisir une valeur dans un ensemble d'options connu avant de continuer.
Combobox
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.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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.
Liste de sélection
Mission
Liste déroulante native - Select
Choisir le Portugal au pointeur et au clavier, puis confirmer que la valeur du formulaire est identique.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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.
Ce que cet essai montre
Combobox est le contrôle de valeur qui coordonne une surface associée et peut être modifiable ou sans saisie ; Select est un contrôle de formulaire natif à options prédéfinies, tandis que Listbox est le widget d'options composite qui peut être autonome ou servir de surface contextuelle.
Lequel convient à ton besoin ?
Combobox
Un contrôle de valeur a besoin d'une surface associée pour des options ou une aide plus riche
Liste de sélection
Choisir une ou plusieurs valeurs connues dans une liste prédéfinie
Différence et sources
Combobox est le contrôle de valeur qui coordonne une surface associée et peut être modifiable ou sans saisie ; Select est un contrôle de formulaire natif à options prédéfinies, tandis que Listbox est le widget d'options composite qui peut être autonome ou servir de surface contextuelle.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
Décision
Question de famille
La personne choisit-elle une valeur native, filtre-t-elle en saisissant ou navigue-t-elle dans une liste ?
Trois critères pour choisir
- Déclenchement
Combobox
Le focus, la saisie ou un bouton facultatif ouvre les suggestions correspondantes.
Liste de sélection
L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme.
- Interactivité
Combobox
Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée.
Liste de sélection
Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable.
- Focus
Combobox
Dans cet exemple modifiable avec popup listbox, le focus DOM reste dans le champ tandis que la relation d'option active communique la navigation ; les autres rôles de surface suivent leur propre modèle de focus.
Liste de sélection
Le contrôle natif délègue le focus et le parcours des options à la plateforme selon sa présentation simple ou multiple déclarée.
Neuf dimensions
- Déclenchement
Combobox
Le focus, la saisie ou un bouton facultatif ouvre les suggestions correspondantes.
Liste de sélection
L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme.
- Modalité
Combobox
Champ modifiable non modal associé à une surface de suggestions.
Liste de sélection
Un choix de formulaire non modal dont la surface est gérée par le navigateur ou le système.
- Positionnement
Combobox
La liste de suggestions est ancrée au champ et maintenue visible dans la fenêtre.
Liste de sélection
Un contrôle dans le formulaire ; la surface d’options ouverte est placée par la plateforme.
- Interactivité
Combobox
Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée.
Liste de sélection
Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable.
- Focus
Combobox
Dans cet exemple modifiable avec popup listbox, le focus DOM reste dans le champ tandis que la relation d'option active communique la navigation ; les autres rôles de surface suivent leur propre modèle de focus.
Liste de sélection
Le contrôle natif délègue le focus et le parcours des options à la plateforme selon sa présentation simple ou multiple déclarée.
- Fermeture
Combobox
Échap ferme une surface ouverte sans valider de nouvelle valeur ; la conservation du texte et les autres actions de fermeture dépendent de la variante de combobox.
Liste de sélection
Pour une sélection simple repliée, le sélecteur de la plateforme se ferme selon son comportement standard de validation ou d'annulation ; une présentation en liste n'implique pas de surface contextuelle à fermer.
- Rôle accessible
Combobox
combobox + popup (listbox | grid | tree | dialog)
Liste de sélection
select
- Cas d’usage
Combobox
Un contrôle de valeur a besoin d'une surface associée pour des options ou une aide plus riche
Liste de sélection
Choisir une ou plusieurs valeurs connues dans une liste prédéfinie
- Comportement mobile
Combobox
Garder les suggestions visibles au-dessus du clavier logiciel ; utiliser une recherche plus grande pour les jeux très volumineux.
Liste de sélection
Préférer le sélecteur mobile natif sauf si le produit exige réellement un filtrage plus riche.
| Dimension | ComboboxCombobox | Liste de sélectionSelect |
|---|---|---|
| Déclenchement | Le focus, la saisie ou un bouton facultatif ouvre les suggestions correspondantes. | L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme. |
| Modalité | Champ modifiable non modal associé à une surface de suggestions. | Un choix de formulaire non modal dont la surface est gérée par le navigateur ou le système. |
| Positionnement | La liste de suggestions est ancrée au champ et maintenue visible dans la fenêtre. | Un contrôle dans le formulaire ; la surface d’options ouverte est placée par la plateforme. |
| Interactivité | Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée. | Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable. |
| Focus | Dans cet exemple modifiable avec popup listbox, le focus DOM reste dans le champ tandis que la relation d'option active communique la navigation ; les autres rôles de surface suivent leur propre modèle de focus. | Le contrôle natif délègue le focus et le parcours des options à la plateforme selon sa présentation simple ou multiple déclarée. |
| Fermeture | Échap ferme une surface ouverte sans valider de nouvelle valeur ; la conservation du texte et les autres actions de fermeture dépendent de la variante de combobox. | Pour une sélection simple repliée, le sélecteur de la plateforme se ferme selon son comportement standard de validation ou d'annulation ; une présentation en liste n'implique pas de surface contextuelle à fermer. |
| Rôle accessible | combobox + popup (listbox | grid | tree | dialog) | select |
| Cas d’usage | Un contrôle de valeur a besoin d'une surface associée pour des options ou une aide plus riche | Choisir une ou plusieurs valeurs connues dans une liste prédéfinie |
| Comportement mobile | Garder les suggestions visibles au-dessus du clavier logiciel ; utiliser une recherche plus grande pour les jeux très volumineux. | Préférer le sélecteur mobile natif sauf si le produit exige réellement un filtrage plus riche. |