Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Cases à cocher
<gcds-checkboxes>

Autres noms : liste de contrôle, liste de vérification. Les cases à cocher offrent un ensemble d'options pour les réponses multiples.
  • GitHub
  • Figma

Aperçu du composant de cases à cocher

Structure des cases à cocher

  • La légende pour les cases à cocher agit comme un titre pour identifier les cases à cocher groupées. Le texte de la légende est aligné à gauche avec la première lettre en majuscule. (Ne s’applique que lorsqu’il y a plusieurs options parmi lesquelles choisir.)
  • Le texte explicatif pour les cases à cocher donne des exigences spécifiques pour remplir les cases à cocher avec succès. (Ne s’applique que lorsqu’il y a plusieurs options parmi lesquelles choisir.)
  • La case à cocher permet aux gens de choisir ou de désactiver une option.
  • La cochée est un repère visuel qui indique qu’une option est sélectionnée.
  • L’étiquette de l’option nomme ou décrit l’option.
  • Le texte explicatif de l’option donne plus de renseignements sur l’option correspondante.
Structure des cases à cocher montrant les étiquettes « légende » en haut et « texte explicatif » en dessous. Plus bas, il y a deux cases à cocher avec leurs libellés à côté et un texte explicatif. Une des cases est cochée.

Offrir des choix clairs

  • Limitez le nombre d’options à 7.
  • Limitez le texte de chaque option à quelques mots ou à une phrase courte. Incluez du texte explicatif s’il faut du contexte additionnel.
  • Ordonnez les options de manière logique. Par exemple, par ordre alphabétique ou du plus au moins commun.

Fournir des instructions claires

  • Ne supposez pas qu’une personne saura comment utiliser une case à cocher.
  • Utilisez le texte explicatif pour indiquer que plusieurs sélections sont possibles. Par exemple, « cochez toutes les cases qui s’appliquent ».
  • Évitez de présélectionner une case à cocher. Cela augmente les risques que les utilisateur·rice·s sautent une question ou soumettent une mauvaise réponse.

Masquer la légende ou les étiquettes seulement lorsque le but est clair

  • Masquez visuellement la légende ou les étiquettes uniquement lorsque le but des cases à cocher est clairement communiqué par le contexte, rendant l’étiquette visuellement redondante, comme dans les cas suivants :
    • tableaux ou autres mises en page où l’espace est limité;
    • paramètres et configurations.
  • Fournissez toujours une légende et des étiquettes pour soutenir les technologies d’assistance.
  • N’ajoutez pas de texte explicatif si vous masquez la légende, puisque celui-ci manque alors de contexte et peut distraire ou prêter à confusion.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-02-12