Boutons radio
<gcds-radios>

Autres noms : case d’option, groupe radio.

Les boutons radio permettent de proposer plusieurs options de réponse pour un choix unique.

• GitHub
• Figma

Créer des boutons radio

Utilisez des boutons radio lorsque vous vous attendez à ce qu'une personne ne sélectionne qu'une seule réponse parmi une courte liste d'options.

Les boutons radio aident les gens à faire un choix grâce à un nombre limité d'options.

Codage et accessibilité des boutons radio

Appliquer les attributs requis

Pour que les boutons radio fonctionnent correctement, utilisez toujours les attributs suivants avec gcds-radios :

• name
• legend
• options

Utiliser l'attribut options avec le groupe de boutons radio

L'attribut options utilise un tableau d'objets pour rendre chaque bouton radio. Voici en exemple l'un de ces objets :

{
  'id'!: '',
  'label'!: '',
  'value'!: '',
  'checked'?: '',
  'hint'?: '',
}

À l'intérieur de l'attribut options, utilisez toujours les propriétés id, label et value de l'objet pour chaque bouton radio. Les autres propriétés sont facultatives.

Utiliser l'attribut value

L'attribut value fournit une référence rapide aux valeurs des boutons radio sélectionnés à l'intérieur du composant gcds-radios.

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.

Ajouter du texte explicatif pour assurer le succès d'une tâche

Utilisez l'attribut hint ou la clé hint de l'objet options pour ajouter du texte explicatif afin d'aider une personne à faire une sélection et à éviter un état d'erreur.

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.