Checkbox
Une checkbox permet aux utilisateurs de sélectionner une ou plusieurs valeurs dans un petit ensemble d'options.
Description
Les checkboxes indiquent clairement que plusieurs options d'un formulaire peuvent être sélectionnées. Veillez à ajouter suffisamment de contexte pour que les utilisateurs aient tout ce dont ils ont besoin pour prendre une décision claire.
Les cases à cocher sont utilisées pour les choix multiples, et non pour les choix mutuellement exclusifs (dans ce cas, on utilisera un radio).
Les utilisateurs peuvent sélectionner zéro, un ou plusieurs éléments.
Web
iOS/Android
Plateformes
Anatomie
- Group label (optionnel) : communique le contexte de la sélection
- Required (optionnel) : indique si l'input est requis ou non
- Tooltip (optionnel) : fournit des informations supplémentaires selon le contexte
- Checkbox controller : indique l'état de sélection
- Label : décrit l'élément à sélectionner
- Helper : informe l'utilisateur des règles de saisie
- Illustration : illustre l'élément
- Border : indique l'état de la checkbox (vert = sélectionné)
- Description (optionnel) : permet de décrire plus en détail la checkbox
- Lien (optionnel): redirection vers un contenu qui offre plus de détail ou de contexte
Usage
Quand l'utiliser ?
- Dans un formulaire ou un panel de filtres lorsque l'utilisateur doit choisir entre plusieurs éléments d'une liste.
- Dans un formulaire lorsque l'on demande à l'utilisateur d'accepter une mention (newsletter, règles GDPR,…).
- Dans un formulaire lorsqu'un champ à choix multiples a moins de 5 options au total. Lorsqu'il y a plus de 5 options, il est conseillé d'utiliser le composant select.
Do's and don'ts
-
Do
Utiliser les checkbox lorsqu’il y a moins de 5 options
-
Don't
Il est déconseillé d’utiliser les checkbox lorsqu’il y a plus de 5 options. Dans ce cas-ci il est recommandé d’utiliser un composant select.
-
Do
Rester consistant dans l'utilisation du style des éléments d’un groupe de checkboxes
-
Don't
Il interdit d’utiliser des styles de checkbox différents dans un groupe de checkbox
-
Do
Il est recommandé d’utiliser une checkbox lorsque son action est validée/activée lors de la soumission du formulaire dont elle fait partie.
-
Don't
Il est déconseillé d’utiliser une checkbox lorsque l’action de celle-ci est immédiate au clic. Dans ce cas-ci, on favorisera l’utilisation d’un composant switch.
Anatomie
- Group label (optionnel) : communique le contexte de la sélection
- Required (optionnel) : indique si l'input est requis ou non
- Tooltip (optionnel) : fournit des informations supplémentaires selon le contexte
- Checkbox controller : indique l'état de sélection
- Label : décrit l'élément à sélectionner
- Helper : informe l'utilisateur des règles de saisie
- Illustration : illustre l'élément
- Border : indique l'état de la checkbox (vert = sélectionné)
Usage
Quand l'utiliser ?
- Dans un formulaire ou un panel de filtres lorsque l'utilisateur doit choisir entre plusieurs éléments d'une liste.
- Dans un formulaire lorsque l'on demande à l'utilisateur d'accepter une mention (newsletter, règles GDPR,…).
- Dans un formulaire lorsqu'un champ à choix multiples a moins de 5 options au total. Lorsqu'il y a plus de 5 options, il est conseillé d'utiliser le composant select.
Do's and don'ts
-
Do
Utiliser les checkbox lorsqu’il y a moins de 5 options
-
Don't
Il est déconseillé d’utiliser les checkbox lorsqu’il y a plus de 5 options. Dans ce cas-ci il est recommandé d’utiliser un composant select.
-
Do
Rester consistant dans l'utilisation du style des éléments d’un groupe de checkboxes
-
Don't
Il interdit d’utiliser des styles de checkbox différents dans un groupe de checkbox
-
Do
Il est recommandé d’utiliser une checkbox lorsque son action est validée/activée lors de la soumission du formulaire dont elle fait partie.
-
Don't
Il est déconseillé d’utiliser une checkbox lorsque l’action de celle-ci est immédiate au clic. Dans ce cas-ci, on favorisera l’utilisation d’un composant switch.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.