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

Sur cette page

Codage et accessibilité les cases à cocher

Appliquer les attributs essentiels

Utilisez toujours les attributs essentiels suivants avec gcds-checkboxes :
  • name
  • options

Utiliser l’attribut options

  • L’attribut options utilise un tableau d’objets pour générer chaque case à cocher.
  • À l’intérieur de chaque objet dans le tableau options, utilisez toujours les propriétés essentielles à cet objet :
    • id
    • label
  • Les autres propriétés sont facultatives.
Exemple: 
{
  'id'!: '',
  'label'!: '',
  'value'?: '',
  'checked'?: '',
  'hint'?: '',
}

Définir les attributs en fonction du nombre de cases à cocher

Une seule case à cocher

  • Ajoutez un seul objet dans l’attribut options pour générer une case à cocher unique.
  • Le jeu de champs est supprimé lorsqu’il n’y a qu’une seule case à cocher.

Un groupe de cases à cocher

  • Ajoutez plus d’un objet dans l’attribut options pour générer plusieurs cases à cocher.
  • Utilisez l’attribut legend pour afficher le jeu de champs.

Utiliser l’attribut value

  • L’attribut value fournit une référence rapide aux valeurs des cases à cocher sélectionnées dans le composant gcds-checkboxes.
  • L’attribut value est formaté comme un tableau de chaînes.
Exemple : 
[“checkboxOneValue”, checkboxTwoValue”]

Ajouter du texte explicatif

Utilisez l’attribut hint pour ajouter du texte explicatif.

Masquer la légende ou les étiquettes

  • Utilisez les attributs hide-legend et hide-label pour masquer visuellement la légende ou l’étiquette tout en la conservant pour les technologies d’assistance.
    • Définissez l’attribut hide-legend à true afin de masquer visuellement la légende d’un groupe de cases à cocher.
    • Définissez l’attribut hide-label à true afin de masquer visuellement l’étiquette d’une seule case à cocher.
  • Évitez d’ajouter du texte explicatif lorsque vous masquez la légende. Vous pouvez également fournir une chaîne vide pour le texte explicatif.
Ajouter la validation et les messages d'erreur
  • Utilisez l'attribut required pour activer la validation et les messages d'erreur intégrés pour les cases à cocher.
  • Les champs comportant des exigences de saisie spécifiques feront l'objet d'une validation, même s'ils ne sont pas obligatoires.
  • Pour les champs facultatifs qui doivent être validés, par exemple pour vérifier le format d'une adresse courriel, ajoutez une validation et des messages d'erreur personnalisés.

Exemples

Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.

Dans cette section

Attributs essentiels

Ces attributs sont requis pour que le composant fonctionne correctement.

legend

L’attribut legend définit la légende du groupe de cases à cocher. 
<gcds-checkboxes
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

name

L’attribut name identifie le composant dans le formulaire. Il permet de récupérer les valeurs sélectionnées après la soumission. 
<gcds-checkboxes
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

options

L’attribut options définit les cases à cocher à afficher en prenant un tableau (array) d’objets, un par case à cocher. 
<gcds-checkboxes
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

Attributs facultatifs

Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.

autofocus

L’attribut autofocus contrôle si la première case à cocher est ciblée automatiquement au chargement de la page. Par défaut, il est défini à false. Lorsqu’il est défini à true, la case à cocher est ciblée à l’affichage. 
<gcds-checkboxes
autofocus
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

disabled

L’attribut disabled contrôle si les cases à cocher sont désactivées ou non. Par défaut, il est défini à false. 
<gcds-checkboxes
disabled
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

error-message

L’attribut error-message définit le message d’erreur à afficher pour les cases à cocher invalides. 
<gcds-checkboxes
error-message="Message d'erreur"
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

form

L’attribut form définit l’identifiant du formulaire auquel appartiennent les cases à cocher. 
<gcds-checkboxes
form="form-id"
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

hide-label

L’attribut hide-label contrôle si le libellé est masqué ou non. 
<gcds-checkboxes
hide-label
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

hide-legend

L’attribut hide-legend contrôle si la légende est masquée ou non. 
<gcds-checkboxes
hide-legend
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

hint

L’attribut hint définit le texte explicatif affiché sous le libellé ou la légende. 
<gcds-checkboxes
hint="Texte explicatif/Exemple de message."
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

required

L’attribut required contrôle si le groupe de cases à cocher est obligatoire ou non. Lorsqu’il est défini à true, il ajoute « obligatoire » après le libellé ou la légende et active le validateur de champ obligatoire. 
<gcds-checkboxes
required
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

validate-on

L’attribut validate-on définit l’événement de validation pour les cases à cocher. 
<gcds-checkboxes
validate-on="blur"
required
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>
<gcds-checkboxes
validate-on="other"
required
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>

value

L’attribut value contient un tableau (array) des valeurs de toutes les cases actuellement cochées. Il se met à jour à chaque changement de sélection. 
<gcds-checkboxes
value='["check2"]'
legend="Légende"
name="checkexample"
options='[
  {"id": "form-check-1", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check1"},
  {"id": "form-check-2", "label": "Libellé", "hint": "Ceci est une description ou un exemple à titre de clarification.", "value": "check2"}
]'>
</gcds-checkboxes>
Générateur de code Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.
  • Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
  • Obtenez le code et intégrez-le dans votre environnement.
  • Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).
Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.
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-06-10