Select
Les champs select permettent aux utilisateurs de choisir un ou plusieurs éléments dans une liste d'options prédéfinies.
Description
Les champs select permettent aux utilisateurs de choisir un ou plusieurs éléments dans une liste d'options prédéfinies. Il est généralement utilisé dans les formulaires pour récolter les informations de l'utilisateur.
Lorsqu'il est replié, il affiche l'option actuellement sélectionnée et lorsqu'il est développé, il affiche une liste déroulante d'options prédéfinies.
Plateformes
Anatomie
- Label : indique à l'utilisateur les informations attendues dans le champ.
- Required (optionnel) : indique si le champ est requis ou non.
- Tooltip (optionnel) : tooltip qui permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans le champ (cf: composant Tooltip)
- Selection / Placeholder : permet à l'utilisateur de visualiser sa sélection. Lorsqu'il est vide, il est remplacé par le placeholder : une description supplémentaire ou un exemple des informations attendues dans le champ.
- Select controller : indique à l'utilisateur la présence d'un dropdown
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper (optionnel) : indique les règles de saisie du champ
Single select
- Sélection: indique à l'utilisateur la sélection en cours. Dans le cas suivant, un seul élément peut être sélectionné à la fois.
- Dropdown : liste des options.
Multi-select
- Sélection: indique à l'utilisateur la sélection en cours. Dans le cas suivant, un seul élément peut être sélectionnés à la fois.
- Dropdown : liste des options.
Usage
Quand l'utiliser ?
Dans un formulaire ou un panel de filtres lorsque l'utilisateur doit choisir entre plusieurs éléments prédéterminés d'une liste.
L'utilisation d'inputs radio ou de checkbox est recommandée lorsqu'il y a moins de 5 options au total, sauf si cette liste d'option est dynamique et peut varier de 1 à X options en fonction du contexte.
Select vs Dropdown
Les composants Select et Dropdown se ressemblent beaucoup, mais ils sont utilisés différemment. Le composant Select est utilisé dans les formulaires pour sélectionner une option dans une liste. Le composant Dropdown est souvent utilisé pour filtrer ou sélectionner une action (menu déroulant), dans les deux cas, la liste déroulante redirigera l'utilisateur ou aura un effet immédiat sur la page actuelle.
Do's and don'ts
-
Do
Il est recommander d’utiliser un champ select lorsqu’il y a plus de 5 options dans la liste déroulante.
-
Don't
Il est déconseillé d’utiliser un champ select lorsqu’il y a moins de 5 options dans la liste déroulante. On utilisera dès lors un radio ou une checkbox.
-
Do
Garder le label et les éléments du menu déroulant concis et clairs.
-
Don't
Éviter les labels et les éléments du menu déroulant trop longs, complexes ou confusants.
Anatomie
- Label : indique à l'utilisateur les informations attendues dans le champ.
- Required (optionnel) : indique si le champ est requis ou non.
- Tooltip (optionnel) : tooltip qui permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans le champ (cf: composant Tooltip)
- Selection / Placeholder : permet à l'utilisateur de visualiser sa sélection. Lorsqu'il est vide, il est remplacé par le placeholder : une description supplémentaire ou un exemple des informations attendues dans le champ.
- Select controller : indique à l'utilisateur la présence d'un dropdown
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper (optionnel) : indique les règles de saisie du champ
Single select
- Handle : permet à l'utilisateur de faire glisser la sheet comme un tiroir. En tirant vers le bas, il ferme la sheet, en tirant vers le haut, il l'étire.
- Close : permet à l'utilisateur de fermer la sheet (dans le cadre du Multi-select, il permet de valider la sélection).
- Search (optionnel) : permet à l'utilisateur de chercher dans la liste d'option.
- Option : Élément à sélectionner.
Multi-select
- Select all (optionnel): permet à l'utilisateur de sélectionner toutes les options de la liste
- Checkbox : liste des options.
Cartes
- Carte de banque
Usage
Quand l'utiliser ?
Dans un formulaire ou un panel de filtres lorsque l'utilisateur doit choisir entre plusieurs éléments prédéterminés d'une liste.
L'utilisation d'inputs radio ou de checkbox est recommandée lorsqu'il y a moins de 5 options au total, sauf si cette liste d'option est dynamique et peut varier de 1 à X options en fonction du contexte.
Select vs Dropdown
Les composants Select et Dropdown se ressemblent beaucoup, mais ils sont utilisés différemment. Le composant Select est utilisé dans les formulaires pour sélectionner une option dans une liste. Le composant Dropdown est souvent utilisé pour filtrer ou sélectionner une action (menu déroulant), dans les deux cas, la liste déroulante redirigera l'utilisateur ou aura un effet immédiat sur la page actuelle.
Do's and don'ts
-
Do
Il est recommander d’utiliser un champ select lorsqu’il y a plus de 5 options dans la liste déroulante.
-
Don't
Il est déconseillé d’utiliser un champ select lorsqu’il y a moins de 5 options dans la liste déroulante. On utilisera dès lors un radio ou une checkbox.
-
Do
Garder le label et les éléments du menu déroulant concis et clairs.
-
Don't
Éviter les labels et les éléments du menu déroulant trop longs, complexes ou confusants.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.