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

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

Aperçu du composant de boutons radio

Codage et accessibilité des boutons radio

Appliquer les attributs essentiels

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

Utiliser l’attribut options

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

Utiliser l’attribut value

L’attribut value fournit une référence rapide à la valeur sélectionnée à l’intérieur du composant gcds-radios.

Ajouter du texte explicatif

Utilisez l’attribut hint pour ajouter du 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 undefined.
  • 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 boutons radio. 
<gcds-radios
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

name

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

options

L’attribut options définit les boutons radio à afficher en prenant un tableau (array) d’objets, un par bouton radio. 
<gcds-radios
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

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 le premier bouton radio est ciblé automatiquement au chargement de la page. Par défaut, il est défini à false. Lorsqu’il est défini à true, le bouton radio est ciblé à l’affichage. 
<gcds-radios
autofocus
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

disabled

L’attribut disabled contrôle si les boutons radio sont désactivés ou non. Par défaut, il est défini à false. 
<gcds-radios
disabled
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

error-message

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

form

L’attribut form définit l’identifiant du formulaire auquel appartiennent les boutons radio. 
<gcds-radios
form="form-id"
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

hide-legend

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

hint

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

required

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

validate-on

L’attribut validate-on définit l’événement de validation pour les boutons radio. 
<gcds-radios
validate-on="other"
required
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>

value

L’attribut value contient la valeur du bouton radio actuellement sélectionné. Il se met à jour à chaque changement de sélection. 
<gcds-radios
value="radio1"
legend="Légende"
name="radio"
options='[
  {"id":"form-radio-1","label":"Libellé 1","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio1"},
  {"id":"form-radio-r","label":"Libellé 2","hint":"Ceci est une description ou un exemple à titre de clarification.", "value": "radio2"}
]'>
</gcds-radios>
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