Liste déroulante

La liste déroulante permet à l’utilisateur de sélectionner une ou plusieurs des options contenues dans une liste. 

Exemple


Quand l’utiliser

La liste déroulante est utilisée dans les formulaires ou dans les filtres de recherche. Elle doit contenir au minimum 7 éléments. 

L’utilisateur peut faire un choix parmi les options prédéterminées, ce qui permet d’éviter les erreurs potentielles (par exemple, une liste de secteurs d’activité). 

Cette composante doit être utilisée seulement lorsqu’aucune autre composante de formulaire convient. On ajoutera la composante Bouton radio plutôt qu’une liste déroulante pour les choix « Oui » et « Non ».

Il existe 3 types de liste déroulante. 

La liste déroulante standard est utilisée lorsqu’un seul choix est requis, par exemple pour sélectionner la province de résidence dans une adresse postale. 

Exemple


La liste déroulante à sélection multiple permet de choisir un ou plusieurs éléments de la liste, comme la composante Case à cocher. Elle ne devrait être utilisée uniquement lorsque les cases à cocher occupent trop d’espace dans l’écran. 

Cette liste est utilisée pour permettre à l’utilisateur de sélectionner des critères comme dans le cas de conditions de travail d’un emploi. 

Exemple


La boîte combinée est une liste à sélection unique ou multiple qui comprend un outil de recherche. 

Cette liste est utilisée pour faciliter la sélection d’éléments lorsque la liste est très longue, par exemple une liste de ministères et organismes.

Exemple


Comment l'utiliser

Peu importe le type de liste utilisé, les critères suivants doivent être respectés :

  • La liste déroulante est toujours accompagnée d’un libellé clair et concis.
  • L’espace réservé (placeholder) dans le champ doit indiquer ce qui est attendu. Par exemple : « Sélectionnez une région ».
  • Les éléments de la liste doivent être courts. Si le libellé dépasse la zone visible, les points de 
    suspension sont utilisés pour indiquer que le texte se poursuit.
  • Les options indisponibles doivent être grisées au lieu d’être retirées de la liste.
  • Les options doivent être présentées en ordre alphabétique ou selon tout ordre logique comme en ordre 
    de popularité.
  • Il faut éviter, si possible, les très longues listes (plus de 15 options).
  • 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.

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.

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

Ouverte, la liste présente les éléments accompagnés d’une case à cocher située à gauche de chaque libellé.

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 2 façons dans le champ:

  • Sous la forme d’étiquettes nominales dans la zone du champ seulement si les libellés sont courts et 
    que le nombre de choix se limite à 3 ou 4 selon la longueur du champ.
  • Sous la forme d’étiquettes numériques indiquant le nombre d’options sélectionnées.

Dans les deux cas, il doit être possible de supprimer la sélection à l’aide d’un icône de « X » inclus dans l’étiquette nominale ou numérique.

Il existe une seule restriction quant à l’usage du type d’étiquette. Peu importe le nombre de choix sélectionnés, si la liste déroulante se retrouve comme filtre dans une page de résultats de recherche, le type d’étiquette utilisé dans le champ sera sous la forme numérique. En effet,  il existe déjà, dans une page de résultats de recherche, une section affichant tous les filtres qui ont été appliqués, également sous la forme d’étiquette. Il n’est donc pas nécessaire de dupliquer l’information.

Boîte combinée

Le champ a une double fonction; il sert également de champ de recherche. En inscrivant au moins les 3 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.

Informations techniques

Fermée, la liste déroulante est d’une hauteur de 40 px. Une zone de dégagement de 8 px se retrouve à la gauche du libellé et à la droite du chevron d’ouverture.

La largeur de la liste peut varier entre ces trois grandeurs selon les besoins:

  • Petit : 156 px
  • Moyen : 342 px
  • Grand : 528 px

Ouverte, la liste est d’une hauteur maximale de 370 px. La liste déroulante permet le défilement vertical lorsque le contenu prend plus d’espace que la hauteur maximale prévue. Le dernier élément visible de la liste est tronqué de 50 % de sa hauteur et une barre de défilement s'ajoute afin de montrer que la liste déroule à la verticale.

Un dégagement de 16 px est présent entre chaque choix du menu ainsi qu’entre la première option et le libellé du champ texte.

La zone de dégagement horizontale entre la dernière option et la boîte du menu est de 8 px.

La hauteur de la zone de sélection et de survol est de 40 px.

Liste déroulante à sélection multiple

Le dégagement entre les cases à cocher et la boîte du menu est de 8 px. 
Les informations techniques des case à cocher se retrouvent dans la fiche Case à cocher.
 

Les étiquettes dans le champ ont une hauteur de 32 px pour laisser un espace de 4 px de chaque côté avec la boîte du contenu. Le dégagement est de 8 px entre elles.

Le dégagement minimal entre l’étiquette et le chevron est de 8 px.

Les informations techniques des étiquettes se retrouvent dans la fiche Étiquettes.

Boîte combinée

Dans la boîte combinée, la hauteur du champ de recherche est de 40 px et une zone de dégagement de 8 px de chaque côté sépare la boîte de la liste et le champ de recherche.

Le dégagement horizontal du haut et du bas du champ est de 16 px.

Lors du défilement, le champ de recherche est toujours en haut et reste disponible à l’utilisateur.

États

Exemple

CSS de la liste fermée
border: 1px solid #8690A2
font-family: Open Sans
font-weight: regular
font-size: 16px
color: #68778D

CSS de l’icône d’ouverture
color: #095797

CSS du titre
font-family: Open Sans
font-weight: bold
font-size: 16px
color: #223654

CSS du focus
border: 2px #1479CC

Exemple

CSS de la liste ouverte
border: 1px solid #8690A2

CSS de l’icône de fermeture
color: #095797

CSS du contenu
font-family: Open Sans
font-size: 16 px
font-weight: regular
color: #223654

Exemple

CSS du survol
background color: #DAE6F0

CSS de la sélection
background color: #1479CC
font-family: Open Sans
font-weight: semibold
font-size: 16px
font-color: #FFFFFF

Exemple

Les CSS des case à cocher se retrouvent dans la fiche Case à cocher.

Exemple

CSS du contenu
font-family: Open Sans
font-weight: regular
font-size: 16px
color: #223654

Les CSS des étiquettes se retrouvent dans la fiche Étiquettes.

Dernière mise à jour : 9 septembre 2021