Case à cocher
La case à cocher permet à l’utilisateur de sélectionner une ou plusieurs options dans une liste.
Exemple
Quand l'utiliser
La composante s’utilise principalement dans les formulaires lorsqu’il y a plus d’un choix de réponse.
Les utilisateurs peuvent cocher autant de cases qu’ils le souhaitent (les sélections s’additionnent).
Une case à cocher seule peut être utilisée dans un contexte où l’utilisateur doit affirmer ou approuver quelque chose. Par exemple, le consentement aux conditions d’utilisation.
Exemple
Comment l'utiliser
On utilise principalement la case à cocher dans une liste de plus de 2 options. On recommande de ne pas dépasser 10 options.
En effet, une liste concise est facilement comprise par l’utilisateur. À l’inverse, un trop grand nombre de choix augmente sa charge cognitive et son temps de décision.
Concernant le positionnement des éléments, ces critères doivent être respectés :
- Les cases à cocher sont placées les unes en dessous des autres, et non côte à côte.
- Le libellé est toujours placé à droite de la case, et celle-ci est alignée à gauche de la page.
- La liste présente en premier les options les plus susceptibles d’être sélectionnées.
- Les options « Aucune de ces réponses », « Je ne sais pas » ou « Autre » doivent toujours être placées en dernier. Si l’option « Autre » est offerte, elle doit être accompagnée d’un champ texte pour préciser la nature du choix.
Il est fortement recommandé de ne pas présélectionner d’options. Les cases à cocher doivent rester vides pour que l’utilisateur comprenne qu’il n’a pas encore répondu à la question et pour éviter les erreurs potentielles.
À faire
À ne pas faire
Informations techniques
Dimensions
La case à cocher par défaut a une dimension totale de 24 px en hauteur et en largeur. L’indicateur de sélection est de 12 px en hauteur par 16 px en largeur, laissant un dégagement intérieur de 6 px en haut et en bas, et de 4 px à gauche et à droite.
La case à cocher au format compact a une dimension totale de 16 px en hauteur et en largeur. L’indicateur de sélection est de 10 px en hauteur par 12 px en largeur, laissant un dégagement intérieur de 3 px en haut et en bas, et de 2 px à gauche et à droite.
Espacements
Par défaut, entre le libellé de la question et le premier choix de réponse, un espacement de 24 px est prévu. L’espacement entre chaque choix de réponse est de 16 px. Un espacement de 8 px est aussi présent entre les boutons et les choix de réponse.
Au format compact, entre le libellé de la question et chaque choix de réponse, un espacement de 16 px est prévu. Un espacement de 8 px est aussi présent entre les boutons et les choix de réponse.
La case à cocher ainsi que le libellé sont cliquables. La zone est d’une hauteur de 32 px et d’une largeur variable selon la longueur du texte. Une marge de 8 px à gauche et à droite doit être ajoutée à la longueur totale.
États de la case à cocher
Exemple
CSS de la case à cocher - active
border: 2px solid #223654;
CSS de la case à cocher - inactive
border: 2px solid #c5cad2;
CSS de la case à cocher - focus
border: 2px solid #4a98d9;
Exemple
CSS de la case à cocher - pressée
background-color: #1472bf;
CSS de la case à cocher - sélectionnée
background-color: #1472bf;
Dernière mise à jour : 30 août 2023