Liste déroulante
La liste déroulante permet à l’utilisateur de sélectionner une ou plusieurs des options contenues dans une liste.
Exemple
Vue d'ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Il existe deux types de liste déroulante selon le nombre de choix qu’il est possible de sélectionner :
- Liste déroulante standard : utilisée lorsqu’un seul choix est requis.
- Liste déroulante à sélection multiple : permet de choisir un ou plusieurs éléments de la liste.
Elle peut aussi être déclinée pour un besoin de recherche dans un liste d’options plus longue :
- Avec boîte combinée : comprend un champ de filtrage dynamique.
Toutes ces variantes peuvent être déclinées en format compact dans des zones ciblées de l’interface où l’espace vertical est limité, en veillant à une utilisation uniforme au sein d’un même groupe :
- Format compact : version à hauteur réduite.
Quand l’utiliser
La liste déroulante est utilisée dans les formulaires ou dans les filtres de recherche.
La liste déroulante est surtout indiquée lorsqu’il y a beaucoup d’options ou lorsqu’aucun autre composant ne convient. Quand le nombre d’options est limité (moins de 10 à 12), il est préférable d’utiliser des boutons radio ou des cases à cocher pour que l’utilisateur voie toutes les possibilités d’un seul coup d’œil. Une exception s’applique toutefois aux filtres en bandeau horizontal, où l’usage de listes déroulantes assure un alignement visuel uniforme entre les champs.
La boîte combinée est utilisée pour faciliter la sélection d’éléments lorsque la liste est longue, par exemple une liste de ministères et organismes.
Le format compact peut être utilisé ponctuellement dans les zones de l’interface où l’espace est restreint ou la densité de contenu élevée. Au sein d’un même groupe de listes déroulantes, il est recommandé d’utiliser un format uniforme. Ailleurs dans la page, lorsque l’espace le permet, le format standard peut être privilégié.
Quand ne pas l’utiliser
Ce composant ne doit pas être utilisé lorsque d’autres composants de formulaire, comme le bouton radio ou la case à cocher, répondent mieux au besoin, ou lorsque la liste contient très peu d’options.
Le format compact ne doit pas être utilisé lorsque la lisibilité du contenu risque d’être compromise, notamment pour des libellés longs, des options sur plusieurs lignes ou dans des contextes destinés à des utilisateurs ayant des besoins accrus en accessibilité. Éviter de combiner les formats compact et standard à l’intérieur d’un même groupe de listes, sauf si la différence de densité ou de contexte est clairement justifiée.
Anatomie
- Libellé de la liste, indicateur de champ obligatoire (facultatif) et précision (facultative)
- Espace réservé (placeholder)
- Champ
- Champ de recherche pour boîte combinée (lorsque approprié)
- Options disponibles
- Élément de la liste
- Barre de défilement
- Format compact
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Liste déroulante à sélection multiple
Des indications sur la façon dont les options sélectionnées s’affichent dans le champ refermé sont précisées dans la section Comportements.
Libellé de la liste
La liste déroulante est toujours accompagnée d’un libellé clair et concis.
Ajouter une astérisque si le champ est obligatoire. Pour plus de détails, consulter la fiche Indicateur de champ obligatoire.
Espace réservé
L’espace réservé dans le champ doit indiquer l’action attendue, par exemple : « Faire une sélection ». Le libellé du champ fournit déjà le contexte (ex. « Région administrative »), il n’est donc pas nécessaire de le répéter dans l’espace réservé. Cette distinction permet de garder le texte court et lisible, tout en évitant que le contenu soit tronqué.
Options disponibles
La liste d’options disponibles doit contenir au minimum 10 à 12 éléments. Évitez, si possible, les très longues listes (plus de 20 à 30 options).
Les options doivent être présentées en ordre alphabétique ou selon tout ordre logique comme en ordre de popularité.
Les éléments de la liste doivent être aussi courts que possible afin de faciliter le balayage visuel et la comparaison. Un libellé de une à deux lignes est à privilégier ; trois lignes peuvent être tolérées dans des cas particuliers. Au-delà de quatre lignes, il est recommandé de simplifier ou de repenser la présentation du contenu, car les libellés trop longs nuisent à la lisibilité et à l’accessibilité.
Les options indisponibles doivent être grisées au lieu d’être retirées de la liste.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Liste déroulante (complète)
Positionnement et alignement : Alignée à gauche. Les listes déroulantes doivent être placées les unes en dessous des autres dans la majorité des cas.
Dimensions : Ouverte, la liste doit afficher environ 7,5 options de 40 px de hauteur (lorsque le libellé tient sur une seule ligne), la dernière option étant tronquée pour indiquer le défilement. La largeur de la liste peut varier entre ces cinq grandeurs selon les besoins :
- Liste déroulante extra-large : largeur s’étendant jusqu’à un maximum de 825 px.
- Liste déroulante large : largeur 528 px.
- Liste déroulante moyenne : largeur 249 px.
- Liste déroulante petite : largeur 156 px.
- Liste déroulante extra-petite : largeur 63 px.
Espacements : Un espacement de 32 px doit être respecté au-dessus et en dessous de la liste déroulante.
Message d’erreur
Positionnement et alignement : Sous la liste déroulante. Voir la page « Message d’erreur » pour plus de détails.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Liste déroulante (complète)
Par défaut, les listes déroulantes sont fermées. Elles peuvent être ouvertes en cliquant sur le champ ou sur l’icône de chevron.
Une icône de chevron pointant vers le bas indique que la liste peut être ouverte. À l’inverse, un chevron pointant vers le haut signifie que la liste peut être fermée.
Liste déroulante standard
Quand une option est sélectionnée, la liste se referme automatiquement et le texte de l’option choisie remplace le texte initial.
Liste déroulante à sélection multiple
Quand une option est sélectionnée, la liste demeure ouverte afin de permettre à l’utilisateur d’effectuer d’autres sélections. Elle se ferme uniquement lorsque l’on clique sur le champ ou à l’extérieur de la composante.
Les choix peuvent s’afficher de 3 façons dans le champ :
- Lorsqu’une seule option est sélectionnée, son libellé s’affiche en texte normal dans le champ, comme pour une liste déroulante standard.
- Lorsqu’il y a deux options sélectionnées, leurs libellés s’affichent en texte normal, séparés par une virgule (ex. : « Option 1, Option 2 »).
- Lorsqu’il y a plus de trois options sélectionnées, le champ affiche en texte normal « X options sélectionnées », où X représente le nombre d’options choisies.
Dans tous les cas, l’utilisateur doit pouvoir retirer ses sélections en rouvrant la liste et en décochant les cases correspondantes.
Champ de recherche pour boîte combinée
Le champ a une double fonction ; il sert également de champ de recherche. En inscrivant au moins les trois premières lettres du mot, la liste d’éléments affiche automatiquement le mot correspondant dans la liste. Il faut cliquer sur le libellé pour confirmer la sélection. Elle se ferme de la même façon que la liste standard ou la liste à sélection multiple, selon le cas.
Options disponibles
Une option « Aucun » peut être pertinente lorsque la sélection est facultative, par exemple pour retirer un filtre, laisser un champ vide ou revenir à l’état initial. Elle n’est pas appropriée lorsque la sélection est obligatoire ou quand l’absence de choix ne donne aucun résultat utile à l’utilisateur.
Barre de défilement
La liste déroulante permet le défilement vertical lorsque le contenu prend plus d’espace que la hauteur maximale prévue. Une barre de défilement s’ajoute afin de montrer que la liste déroule à la verticale.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le champ ou sur l’icône de chevron pour ouvrir ou fermer la liste.
- Cliquer sur un libellé d’option pour le sélectionner.
- Dans la liste multiple, cocher ou décocher une case pour ajouter ou retirer une option.
- Cliquer à l’extérieur du composant pour fermer la liste.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tabulation : naviguer vers le champ de la liste déroulante.
- Entrée ou Barre d’espace : ouvrir ou fermer la liste.
- Flèche bas/flèche haut : se déplacer entre les options de la liste.
- Entrée : sélectionner une option (dans la liste standard, la liste se referme automatiquement).
- Espace : cocher/décocher une case dans une liste multiple.
- Échap : fermer la liste sans sélectionner d’option.
- Dans le champ de recherche pour boîte combinée, la saisie de texte filtre les options en direct.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 28 janvier 2026