Case à cocher
<gcds-checkbox>

Autres noms : liste de contrôle, liste de vérification.

La case à cocher permet de proposer un ensemble d'options en vue d'une sélection simple ou multiple.

• GitHub
• Figma

Structure de la case à cocher — avec jeu de champs

1. La légende du jeu de champs agit comme un titre pour discerner les boutons radio groupés. Le texte de la légende est aligné à gauche avec la première lettre en majuscule.
2. Le texte explicatif du jeu de champs communique des exigences spécifiques pour les cases à cocher groupés afin d'assurer la réussite de la tâche.
3. La case à cocher indique, par la présence ou l'absence de la coche (également appelée case cochée), si une option a été sélectionnée ou non.
4. Le case cochée indique qu'une option a été sélectionnée.
5. Le libellé de la case à cocher indique le choix que représente la case à cocher. Le libellé du texte a la première lettre en majuscule.
6. Le texte explicatif de la case à cocher communique aux utilisateur·rice·s des renseignements sur le choix.

Structure de la case à cocher

Utilisez le composant Jeu de champs pour la case à cocher, sauf pour les cases à cocher qui ne demandent qu'une seule case à cocher.

1. La case à cocher indique, par la présence ou l'absence de la coche (également appelée case cochée), si une option a été sélectionnée ou non.
2. La coche indique qu'une option a été sélectionnée.
3. Le libellé de la case à cocher indique le choix que représente la case à cocher. Le libellé du texte a la première lettre en majuscule.
4. Le texte explicatif de la case à cocher communique aux utilisateur·rice·s des renseignements sur le choix.

Accessibilité et design des cases à cocher

Assurez-vous que les cases à cocher soient visibles et que les options soient claires

• Limitez le nombre d'options à 6 ou 7.
• Limitez le texte de chaque option à quelques mots ou à une courte phrase et ajoutez du texte explicatif pour plus de contexte.
• En règle générale, il est préférable de classer les options par ordre alphabétique. Dans certains cas, il peut être utile de les classer du plus commun au moins commun.

Aidez les gens à comprendre comment utiliser les cases à cocher

• Ne supposez pas qu'une personne saura comment utiliser une case à cocher.
• Utilisez le texte explicatif du jeu de champs pour indiquer aux utilisateur·rice·s qui ne sont pas à l'aise avec les boutons radio qu'ils ne peuvent choisir qu'une seule option. Par exemple, « Sélectionnez l'option la plus pertinente ».
• Utilisez le texte explicatif du jeu de champs afin d'indiquer aux utilisateur·rice·s qui ne sont pas à l'aise avec les cases à cocher qu'ils peuvent faire plus qu'un choix. Par exemple, « cochez toutes les cases qui s'appliquent ».
• Évitez de présélectionner les options de case à cocher. Cela augmente les risques que les utilisateur·rice·s sautent une question ou soumettent une mauvaise réponse.