Communications numériques gouvernementales Beta

Système de design gouvernemental

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). 

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, assurez-vous de respecter ces critères :

  • 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. Laissez les cases à cocher 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

Dimension de la case à cocher

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. 

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 du bouton radio

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 : 1er septembre 2020