Comparaison comportementale
Liste d'options vs Liste de sélection
Différence décisive
La Liste d’options est un widget composite que tu composes et stylises, à sélection simple ou multiple ; la Liste de sélection est le contrôle de formulaire natif que le navigateur affiche et gère.
Critères de choix, liens et sources
- Liste d'optionsChoisis Liste d’options si les options exigent un rendu personnalisé, restent visibles ou permettent une sélection multiple avec des raccourcis clavier que tu contrôles.Ouvrir la fiche Liste d'options
- Liste de sélectionChoisis Liste de sélection si un ensemble connu de valeurs tient dans un champ de formulaire simple 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 ?
Liste d'options
Contexte commun aux essais
Un formulaire demande à l'utilisateur de choisir une valeur dans un ensemble d'options connu avant de continuer.
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.
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
Listbox est le widget d'options composite, autonome ou contextuel, à sélection simple ou multiple ; Select est un contrôle de formulaire natif, tandis que Combobox est le contrôle de valeur qui possède ou contrôle une surface associée.
Lequel convient à ton besoin ?
Liste d'options
Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé
Liste de sélection
Choisir une ou plusieurs valeurs connues dans une liste prédéfinie
Différence et sources
Listbox est le widget d'options composite, autonome ou contextuel, à sélection simple ou multiple ; Select est un contrôle de formulaire natif, tandis que Combobox est le contrôle de valeur qui possède ou contrôle une surface associée.
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
Liste d'options
Le focus ou le pointeur atteint une liste d’options déjà visible.
Liste de sélection
L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme.
- Interactivité
Liste d'options
Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions.
Liste de sélection
Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable.
- 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.
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
Liste d'options
Le focus ou le pointeur atteint une liste d’options déjà visible.
Liste de sélection
L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme.
- Modalité
Liste d'options
Widget de sélection non modal intégré au formulaire ou à la tâche en cours.
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
Liste d'options
Une liste visible dans le flux, pas un sélecteur fermé avec surface surgissante.
Liste de sélection
Un contrôle dans le formulaire ; la surface d’options ouverte est placée par la plateforme.
- Interactivité
Liste d'options
Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions.
Liste de sélection
Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable.
- 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.
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
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.
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
Liste d'options
listbox > option
Liste de sélection
select
- Cas d’usage
Liste d'options
Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé
Liste de sélection
Choisir une ou plusieurs valeurs connues dans une liste prédéfinie
- Comportement mobile
Liste d'options
Utiliser de grandes lignes et un défilement maîtrisé ; préférer un select natif pour une courte liste simple.
Liste de sélection
Préférer le sélecteur mobile natif sauf si le produit exige réellement un filtrage plus riche.
| Dimension | Liste d'optionsListbox | Liste de sélectionSelect |
|---|---|---|
| Déclenchement | Le focus ou le pointeur atteint une liste d’options déjà visible. | L’appui sur le contrôle natif libellé ouvre le sélecteur de la plateforme. |
| Modalité | Widget de sélection non modal intégré au formulaire ou à la tâche en cours. | Un choix de formulaire non modal dont la surface est gérée par le navigateur ou le système. |
| Positionnement | Une liste visible dans le flux, pas un sélecteur fermé avec surface surgissante. | Un contrôle dans le formulaire ; la surface d’options ouverte est placée par la plateforme. |
| Interactivité | Permet une sélection simple ou multiple avec déplacement clavier géré ; les options ne sont pas des actions. | Sélectionne une valeur parmi des options ; ne contient ni actions arbitraires ni contenu filtrable. |
| 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. | 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 | 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. | 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 | listbox > option | select |
| Cas d’usage | Une ou plusieurs valeurs sont choisies dans un ensemble composite d'options nommé | Choisir une ou plusieurs valeurs connues dans une liste prédéfinie |
| Comportement mobile | Utiliser de grandes lignes et un défilement maîtrisé ; préférer un select natif pour une courte liste simple. | Préférer le sélecteur mobile natif sauf si le produit exige réellement un filtrage plus riche. |