Dernière mise à jour : 21 juillet 2025
La case à cocher permet de présenter une à six options parmi lesquelles l’utilisateur ou l’utilisatrice détermine celles à sélectionner.
- Guide d’utilisation
- Design
Dans cette page
1. Utilisation
Principales règles
La case à cocher est principalement utilisée en groupe pour afficher une série d’options dont le nombre varie de deux à six.
Il est possible de choisir une ou plusieurs options ou de n’en sélectionner aucune.
Si la sélection est limitée à un nombre précis, un texte d’aide doit le spécifier.
Variants possibles
Case à cocher – Liste verticale
(deux à six options)
Case à cocher – Liste horizontale
(deux options)
Case à cocher seule
Interactivité
- La case à cocher et son libellé associé sont cliquables permettant de sélectionner ou de désélectionner l’option.
- Pour que le choix soit délibéré, aucune option n’est présélectionnée par défaut.
- Lorsque la case est cochée, elle confirme la sélection ou l’acceptation du libellé associé.
Aucun élément interactif, par exemple une infobulle ou un hyperlien, ne doit être intégré dans un libellé d’option.- Si un hyperlien est requis, il peut être inséré dans un texte descriptif.
- Pour permettre la consultation d’un contenu important en lien avec le libellé de la case à cocher seule, un texte intégrant un hyperlien peut être ajouté au-dessus de la case.
2. Quand envisager autre chose
- Pour présenter un ensemble de deux à six options courtes où un seul choix de réponse est possible, opter pour le bouton radio.
- Lorsqu’une seule option doit être retenue parmi plus de six options courtes et précises, utiliser la liste déroulante.
- Si la réponse est unique à l’utilisateur ou l’utilisatrice ou pour ne pas limiter les options, se servir du champ texte.
3. Rédaction UX
Règles spécifiques à la case à cocher
Libellé principal
Le libellé principal est clair, concis et rédigé dans une forme positive.
Il commence par une majuscule.
Il ne finit jamais par un deux-points et n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète ou interrogative, il peut exceptionnellement se terminer par un point ou un point d’interrogation.
Limite de caractères : 100, espaces incluses.
Texte d'aide (optionnel)
Le texte d’aide fournit une information complémentaire pour bien comprendre le libellé principal et y répondre correctement.
- Par exemple, dans le cas d’un groupe de cases à cocher, il peut indiquer si la sélection est limitée à un nombre défini.
Il ne comporte pas de limite de caractères, mais il doit être précis et le plus concis possible.
Il utilise un langage simple et inclusif.
Libellé d’option
Le libellé d’option est clair, précis et rédigé dans une forme positive.
Il commence toujours par une majuscule.
Il n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète, il peut exceptionnellement se terminer par un point.
Tous les libellés d’option d’un même groupe doivent suivre une structure grammaticale commune.
- Par exemple, ce sont tous des noms communs, des verbes à l’infinitif ou de courtes phrases.
Les options sont classées dans un ordre logique, soit du plus courant au moins courant, du plus simple au plus complexe ou par ordre alphabétique.
Limites de caractères :
- Case à cocher – Liste verticale : 75, espaces incluses.
- Case à cocher – Liste horizontale : 14, espaces incluses.
- Case à cocher seule : 150, espaces incluses.
Texte descriptif (optionnel)
Le texte descriptif vient définir davantage un libellé d’option pour aider à sa compréhension.
Il peut inclure un hyperlien.
Il est clair, précis et concis.
Il utilise un langage simple et inclusif.
Limite de caractères : 185, espaces incluses.
Texte avec hyperlien (optionnel)
Cette option est seulement possible avec la case à cocher seule.
Elle répond au besoin de rendre accessible un document dont la consultation est en lien avec la confirmation du libellé d’option de la case à cocher seule.
Ce texte doit inclure un hyperlien qui dirige vers le document à consulter pour décider de sélectionner ou non la case à cocher seule.
Limite de caractères (incluant l’hyperlien) : 150, espaces incluses.
Règles générales pour les formulaires
Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.
Éviter les termes techniques, sauf s’ils sont connus par les personnes qui rempliront le formulaire, par exemple des gens de métier.
Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.
Si une information complémentaire doit être communiquée, tenir compte du contexte pour choisir ce qui convient le mieux entre le texte d’aide et l'infobulle.
1. Case à cocher – Liste verticale
Anatomie
2. Case à cocher – Liste horizontale
Anatomie
3. Case à cocher seule
Anatomie
4. Astérisque et infobulle
Au niveau du libellé principal, deux éléments peuvent être ajoutés, soit :
- un astérisque (*) pour indiquer une question obligatoire ;
- une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.
Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer. Les exemples ci-dessous illustrent leur emplacement pour les variants Liste verticale et Liste horizontale de la case à cocher.
Particularités de la case à cocher seule
L’astérisque signifiant que l’acceptation du champ est obligatoire se positionne au niveau du libellé de la case à cocher seule.
Aucun élément interactif ne peut être intégré au libellé. Pour référer à un document pouvant être consulté, l’ajout d'un texte avec hyperlien est permis au-dessus de la case.
5. Texte d’aide et texte descriptif
Le texte d’aide se positionne sous le libellé principal, puisqu’il fournit des informations essentielles pour répondre à la question, par exemple le nombre d’options à sélectionner.
Le texte descriptif, lui, vient se placer sous le libellé d’option, puisqu’il est directement lié à ce dernier en y apportant une explication supplémentaire.
Case à cocher – Liste verticale
Case à cocher – Liste horizontale
Le variant Case à cocher – Liste horizontale présente des options courtes et simples à comprendre. C’est pourquoi l’utilisation de ces deux éléments textuels n'est pas recommandée.
Le texte d’aide est permis, mais plutôt que d’y avoir recours, il vaut mieux revoir le libellé principal pour qu’il soit simple et parlant en soi.
Pour ce qui est du texte descriptif, son utilisation est à éviter. Non seulement les options ne devraient pas avoir besoin d’explication additionnelle, mais son ajout vient briser la structure visuelle qui se veut épurée.
Case à cocher seule
Dans le cas de la case à cocher seule, l’utilisation du texte d’aide et du texte descriptif n’est pas permise. Toutefois, il est possible d’ajouter un texte juste au-dessus de la case pour communiquer des instructions ou plus de détails. Ce texte peut inclure un hyperlien dirigeant vers un document à consulter, préalablement à l’acceptation du libellé de la case.
6. Message d’erreur
Avec les variants Liste verticale et Liste horizontale de la case à cocher, le message d’erreur se place sous le libellé principal. S’il y a un texte d’aide, c’est sous celui-ci qu’on le positionnera.
Avec la case à cocher seule, le message d’erreur vient se placer directement en dessous de la case et son libellé associé.
7. Grille
Quel que soit le variant de case à cocher utilisé, il importe de respecter un certain spectre de longueur de ligne pour assurer une lisibilité optimale. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d’écran.
8. États interactifs
Dépendamment si la case à cocher est sélectionnée ou non, différents états interactifs sont prévus pour celle-ci et son libellé d’option.
Non sélectionné
Défaut
Survol
Désactivé
Focus
Case sélectionnée
Sélectionné
Focus
Désactivé
