Composantes
Case à cocher
Dans cette page :
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).
Comment l’utiliser
On utilise 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 restées 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 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
Entre le libellé de la question et chaque choix de réponse, un espacement de 20 px est prévu. Un espacement de 8 px est aussi présent entre les cases 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’un 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: 1px solid #808a9d
CSS de la case à cocher - inactive
border: 1px solid #bfc4ce
CSS de la case à cocher - focus
border: 2px solid #5b6476
Exemple
CSS de la case à cocher - pressé
background-color: #1479cc
CSS de la case à cocher - sélectionné
background-color: #1479cc
Dernière mise à jour : 15 août 2022