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

Créer une case à cocher

Utilisez une case à cocher avec un jeu de champs lorsque vous vous attendez à ce que l’utilisateur·rice choisisse plus d’une option dans une courte liste d’éléments en réponse à une question ou une instruction.

Accessibilité et codage des cases à cocher

Pour que la case à cocher fonctionne correctement, utilisez toujours les attributs suivants avec <gcds-checkbox>:

• name
• label
• checkbox-id

Utilisez un jeu de champs et l’attribut obligatoire

• Regroupez les options de cases à cocher et nommer le groupe en utilisant la composante de jeu de champs.
• Utilisez le jeu de champs legend et l’attribut hint pour le nom du groupe et ses instructions.
• Pour les groupes obligatoires, sélectionnez l’attribut required dans le jeu de champs. La sélection de l’attribut required permet la validation et la gestion des erreurs pour le groupe de cases à cocher.

Pour une seule case à cocher

• Évitez d’utiliser un jeu de champs pour les cases à cocher avec une seule case à cocher, comme pour une confirmation que les modalités ont été lues avant l’inscription.
• Utilisez la propriété required pour activer le validateur nécessaire. La validation s’effectuera par défaut pendant l’événement onBlur.
• Si vous devez modifier l’événement de validation, utilisez l’attribut validate-on. Une validation onBlur est possible lorsque l’élément n’est plus ciblé. Il est également possible de procéder à une validation manuelle avec la méthode validate.
• Employez l’attribut required lorsqu’une seule case à cocher doit être remplie. Cet attribut insérera la mention « (obligatoire) » à la fin de la case à cocher.
• Conservez l’attribut error-message par défaut pour une seule case à cocher qui doit être validée. Une entrée manquante affichera un message d’erreur intercalé.
• Supprimez l’attribut error-message par défaut si la case à cocher est facultative.

Obtenez votre 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.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

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