Comparaison comportementale
Combobox vs Liste d'options
Différence décisive
La Combobox est le contrôle de valeur qui possède une surface associée et peut accepter la saisie ; la Liste d’options est le widget d’options lui-même, autonome ou à l’intérieur de cette surface.
Critères de choix, liens et sources
- ComboboxChoisis Combobox si l’utilisateur saisit ou filtre pour atteindre une valeur et que les options n’apparaissent qu’à la demande.Ouvrir la fiche Combobox
- Liste d'optionsChoisis Liste d’options si les options restent visibles dans la page ou si plusieurs peuvent être sélectionnées à la fois.Ouvrir la fiche Liste d'options
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 d'options
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.
É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 quatre périodes restent visibles ; la ligne sélectionnée est mise en évidence et reprise dans le statut. Cet exemple natif ne sépare pas un état actif d'un état validé.
- 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.
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 d'options
Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé
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 d'options
Le focus ou le pointeur atteint une liste d’options déjà visible.
- Interactivité
Combobox
Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée.
Liste d'options
Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions.
- 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 d'options
Le select natif affichant plusieurs lignes forme un seul arrêt de tabulation. Dans cet exemple à sélection simple, la sélection suit le focus clavier : états actif et sélectionné évoluent ensemble ; une listbox personnalisée doit déclarer son propre modèle.
Neuf dimensions
- Déclenchement
Combobox
Le focus, la saisie ou un bouton facultatif ouvre les suggestions correspondantes.
Liste d'options
Le focus ou le pointeur atteint une liste d’options déjà visible.
- Modalité
Combobox
Champ modifiable non modal associé à une surface de suggestions.
Liste d'options
Widget de sélection non modal intégré au formulaire ou à la tâche en cours.
- Positionnement
Combobox
La liste de suggestions est ancrée au champ et maintenue visible dans la fenêtre.
Liste d'options
Une liste visible dans le flux, pas un sélecteur fermé avec surface surgissante.
- Interactivité
Combobox
Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée.
Liste d'options
Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions.
- 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 d'options
Le select natif affichant plusieurs lignes forme un seul arrêt de tabulation. Dans cet exemple à sélection simple, la sélection suit le focus clavier : états actif et sélectionné évoluent ensemble ; une listbox personnalisée doit déclarer son propre modèle.
- 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 d'options
Dans cet exemple autonome, quitter avec Tab conserve la valeur sélectionnée ; lorsqu'une listbox est contextuelle, sa fermeture est coordonnée par le contrôle propriétaire.
- Rôle accessible
Combobox
combobox + popup (listbox | grid | tree | dialog)
Liste d'options
listbox > option
- 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 d'options
Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé
- Comportement mobile
Combobox
Garder les suggestions visibles au-dessus du clavier logiciel ; utiliser une recherche plus grande pour les jeux très volumineux.
Liste d'options
Utiliser de grandes lignes et un défilement maîtrisé ; préférer un select natif pour une courte liste simple.
| Dimension | ComboboxCombobox | Liste d'optionsListbox |
|---|---|---|
| Déclenchement | Le focus, la saisie ou un bouton facultatif ouvre les suggestions correspondantes. | Le focus ou le pointeur atteint une liste d’options déjà visible. |
| Modalité | Champ modifiable non modal associé à une surface de suggestions. | Widget de sélection non modal intégré au formulaire ou à la tâche en cours. |
| Positionnement | La liste de suggestions est ancrée au champ et maintenue visible dans la fenêtre. | Une liste visible dans le flux, pas un sélecteur fermé avec surface surgissante. |
| Interactivité | Combine saisie de texte, navigation clavier et sélection d’une valeur suggérée. | Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions. |
| 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 select natif affichant plusieurs lignes forme un seul arrêt de tabulation. Dans cet exemple à sélection simple, la sélection suit le focus clavier : états actif et sélectionné évoluent ensemble ; une listbox personnalisée doit déclarer son propre modèle. |
| 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. | Dans cet exemple autonome, quitter avec Tab conserve la valeur sélectionnée ; lorsqu'une listbox est contextuelle, sa fermeture est coordonnée par le contrôle propriétaire. |
| Rôle accessible | combobox + popup (listbox | grid | tree | dialog) | listbox > option |
| Cas d’usage | Un contrôle de valeur a besoin d'une surface associée pour des options ou une aide plus riche | Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé |
| Comportement mobile | Garder les suggestions visibles au-dessus du clavier logiciel ; utiliser une recherche plus grande pour les jeux très volumineux. | Utiliser de grandes lignes et un défilement maîtrisé ; préférer un select natif pour une courte liste simple. |