Usages
Les listes déroulantes sont à utiliser lorsqu'un utilisateur doit choisir entre 6 et 15 options possibles et que vous avez un espace limité pour afficher les options.
Ajoutez un astérisque au libellé pour informer qu’un élément est obligatoire, avec une légende en haut du formulaire. Si l’ensemble des éléments sont obligatoires, indiquez le au début du formulaire.
✅ Usage correct :
Utilisez le composant champ à liste déroulante lorsque vous avez besoin de fournir aux utilisateurs un moyen de choisir parmi une liste d'options. Il est particulièrement adapté pour les formulaires et les filtres.
🚫 Usage incorrect :
N'utilisez pas le champ à liste déroulante lorsque la liste d'options est très courte ou quand les options ne sont pas liées logiquement.
Localisation :
Les champs à liste déroulante peuvent être placés dans des formulaires, des boîtes de dialogue, des barres d'outils ou d'autres zones où les choix des utilisateurs sont nécessaires.
Comportement général
Les caractéristiques générales du comportement d'un champ à liste déroulante sont les suivantes :
Affichage initial
Quand aucune option n'est sélectionné, le champ possède un placeholder. L'information de celui ci varie en fonction du contexte :
- "Sélectionner" : quand il s'agit d'une liste à choix unique.
- "Sélectionner une ou plusieurs options" : pour les listes à choix multiples.
De plus, une flèche dirigée vers le bas est présente pour indiquer que la liste d'options est fermée.
Ouverture du menu d'options
En cliquant sur le champ, une liste déroulante d'options s'affiche permettant à l'utilisateur de sélectionner une option unique ou plusieurs options pour la variante de choix multiple.
💡 Les options sont disponible dans un composant à part entière dans le système de design de la CNSA → Option
Le menu d'options met en œuvre le composant option pour la présentation des choix disponibles.
Il s'affiche sous le champ, proposant plusieurs choix. Lorsqu'une option est sélectionnée, son arrière-plan change en violet et une icône de coche s'affiche à côté du texte de l'option. Les sélections sont ensuite présentées sous forme de tags.
Choix des options
Pour la variante à choix unique, l'option sélectionnée est remplacée par une autre dès que cette dernière est choisie.
Dans le cas de la variante à choix multiple, vous pouvez désélectionner une option en la cliquant à nouveau
Annulation des options
Dans le cas d'une variante à choix multiple Il est possible de supprimer les options sélectionnées en utilisant l'icône de fermeture située à l'intérieur des tags.
Interaction continue
L'utilisateur peut continuer à ajouter, supprimer ou modifier ses sélections jusqu'à ce qu'il soit satisfait de ses choix.