Jeu de champs
<gcds-fieldset>

Autres noms : champ de formulaire.

Un jeu de champs est un groupe de plusieurs composants ou éléments d'un formulaire.

• GitHub
• Figma

Créer un composant de jeu de champs

Utilisez un jeu de champs pour regrouper des éléments ou des composants de formulaire connexes et faites en sorte que ces groupes soient perceptibles. Utilisez également un jeu de champs pour les composants comportant plusieurs options, comme les boutons radio et les cases à cocher.

Codage et accessibilité des jeux de champs

Traiter les messages d'erreur et la validation

• Utilisez l'attribut required pour activer le valideur de champ obligatoire. La validation s'effectuera par défaut pendant l'évènement onBlur. Une réponse manquante ou non valide affichera un message d'erreur intercalé prédéfini.

• Si vous devez modifier l'évènement de validation, utilisez l'attribut validate-on. La validation peut se produire pendant l'évènement onBlur, lorsque l'élément perd son état ciblé, ou de façon manuelle avec la méthode validate().

• Utilisez l'attribut required pour les champs qui doivent obligatoirement être remplis. La mention « obligatoire » sera alors ajoutée à la fin de l'étiquette.

• Utilisez l'attribut error-message pour inclure un message d'erreur pour tous les champs de saisie obligatoires. Évitez d'utiliser des messages d'erreur pour les champs de saisie facultatifs.

• Pour les champs facultatifs, évitez d'ajouter l'attribut error-message.

• Pour un champ facultatif nécessitant une validation qui dépend de ce que l'utilisateur a saisi (par exemple pour valider un format d'adresse courriel), ajoutez plutôt une validation et un message d'erreur personnalisés.

Gardez le texte explicatif fixe et visible

Ajoutez du texte explicatif par défaut pour fournir du contexte supplémentaire afin d'aider les utilisateur·rice·s à saisir des valeurs complètes et éviter les erreurs. Le texte explicatif s'insère sous la légende du jeu de champs et au-dessus du groupe.

Prendre en charge les messages d'erreur et le texte explicatif pour les boutons radio et les cases à cocher

• Les attributs required et error-message fonctionnent mieux avec un groupe de cases à cocher ou de boutons radio.
• Conservez le texte explicatif, les validateurs et les messages d'erreur par défaut dans le jeu de champs pour les boutons radio et les cases à cocher.
• Pour les boutons radio et les cases à cocher, insérez la question dans la légende afin d'aider les utilisateur·rice·s de lecteurs d'écran à comprendre que les entrées sont toutes liées.

Validateurs

Le jeu de champs ne validera que les cases à cocher et les boutons radio enfants.

• Utilisez la propriété requise pour activer le validateur approprié. 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 blur 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.

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.