Usage
Les combobox peuvent être utilisées lorsqu'un utilisateur doit choisir parmi un large choix d'options (supérieur à 10).
Contrairement à un simple champ à liste déroulante, il permet à l'utilisateur de saisir du texte pour filtrer dans la liste des options, ou, si la fonctionnalité est activée, d'ajouter une option supplémentaire aux choix qui lui sont proposés.
Utilisez l’attribut required pour informer l’utilisateur qu’un choix est obligatoire. Si l’ensemble des éléments sont obligatoires, indiquez-le au début du formulaire.
✅ Usage correct :
Utilisez le composant combobox 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 combobox lorsque la liste d'options est très courte ou quand les options ne sont pas liées logiquement.
Comportement général
Les caractéristiques générales du comportement d'un combobox 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 ou saisir une option" : quand il s'agit d'une liste à choix unique.
- "Sélectionner ou saisir 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 ou plusieurs options.
💡 Les options sont disponibles 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 dans le cas d'une sélection multiple.
Affichage des options
Si le nombre d’options disponibles est supérieur au nombre d’options affichées (défini via l’attribut visible-list-length, un bouton accessible voir plus sera affiché à la fin de la liste, et permettra d’étendre cette dernière avec de nouvelles options.
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.
Localisation :
Les combobox 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.