Boutons radio - Radio button

Les boutons radio permettent à l’utilisateur de sélectionner une seule option dans une liste.

 

Bouton radio

Le bouton radio ne peut pas être utilisé seul : il faut au minimum 2 options. Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).

Structure

Les boutons radios sont composés des éléments suivants:

  • des boutons - obligatoires.

  • des labels, associés aux boutons - obligatoires.

  • un texte additionnel pour les boutons / labels - optionnel.

  • une légende, décrivant le contexte du groupe de bouton - obligatoire.

  • une description additionnelle pour la légende - optionnelle.

  • un message d’erreur ou de succès - obligatoire si un changement d'état doit être notifié à l’utilisateur.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-1" name="radio"> <label class="fr-label" for="radio-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-2" name="radio"> <label class="fr-label" for="radio-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-3" name="radio"> <label class="fr-label" for="radio-3">Label radio </label> </div> </div> </fieldset> </div>


L'état inactif indique que l'utilisateur ne peux pas interagir avec l'élément

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-form-group"> <fieldset class="fr-fieldset" disabled="disabled"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-disabled-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-disabled-1" name="radio-disabled"> <label class="fr-label" for="radio-disabled-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-disabled-2" name="radio-disabled"> <label class="fr-label" for="radio-disabled-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-disabled-3" name="radio-disabled"> <label class="fr-label" for="radio-disabled-3">Label radio </label> </div> </div> </fieldset> </div>

Liste horizontale (radio buttons inline)

Il faut privilégier les listes verticales aux listes horizontales, plus difficile à lire pour l’utilisateur.
Cette organisation est donc à utiliser uniquement lorsqu'il n’y a que 2 options ou que les libellés sont courts.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-inline-1" name="radio-inline"> <label class="fr-label" for="radio-inline-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-inline-2" name="radio-inline"> <label class="fr-label" for="radio-inline-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-inline-3" name="radio-inline"> <label class="fr-label" for="radio-inline-3">Label radio </label> </div> </div> </fieldset> </div>

Liste avec texte d’aide

Il est recommandé d’ajouter un texte d’aide afin de faciliter le choix de l’utilisateur. Ces précisions peuvent être apportées de 2 façons :

  • via un texte sous le titre de la liste

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-hint-legend'> Légende pour l’ensemble de champs <span class="fr-hint-text">Texte de description additionnel</span> </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-hint-1" name="radio-hint"> <label class="fr-label" for="radio-hint-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-hint-2" name="radio-hint"> <label class="fr-label" for="radio-hint-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-hint-3" name="radio-hint"> <label class="fr-label" for="radio-hint-3">Label radio </label> </div> </div> </fieldset> </div>

 

  • via un texte sous le libellé de chaque bouton radio

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-hint-element-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-hint-element-1" name="radio-hint-element"> <label class="fr-label" for="radio-hint-element-1">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-hint-element-2" name="radio-hint-element"> <label class="fr-label" for="radio-hint-element-2">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-hint-element-3" name="radio-hint-element"> <label class="fr-label" for="radio-hint-element-3">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> </div> </fieldset> </div>

État d'erreur

L'état d’erreur est signalé par l’affichage d’une ligne rouge et d'un message d’erreur en-dessous du composant (cf. couleurs fonctionnelles : le rouge est la couleur de l’état erreur).

Pour le groupe de bouton radio

Pour les développeurs

Pour l'état d’erreur, il est nécessaire d’ajouter un role=”group” à la balise fieldset. De plus,
le message d’erreur et la balise legend sont liés au fieldset via l’attribut aria-labelledby.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="radio-error-legend radio-error-desc-error" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-error-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-error-1" name="radio-error"> <label class="fr-label" for="radio-error-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-error-2" name="radio-error"> <label class="fr-label" for="radio-error-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-error-3" name="radio-error"> <label class="fr-label" for="radio-error-3">Label radio </label> </div> </div> <p id="radio-error-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </fieldset> </div>


Pour les liste de boutons radio en ligne:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--error" aria-labelledby="radio-error-inline-legend radio-error-inline-desc-error" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-error-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-error-inline-1" name="radio-error-inline"> <label class="fr-label" for="radio-error-inline-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-error-inline-2" name="radio-error-inline"> <label class="fr-label" for="radio-error-inline-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-error-inline-3" name="radio-error-inline"> <label class="fr-label" for="radio-error-inline-3">Label radio </label> </div> </div> <p id="radio-error-inline-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </fieldset> </div>

 

État de succès

L'état de succès est signalé par l’affichage d’une ligne verte et d'un message de succès en-dessous du composant (cf. couleurs fonctionnelles : le vert est la couleur de l’état succès).

Pour le groupe de bouton radio

 


Pour les développeurs

Pour l'état de success, il est nécessaire d’ajouter un role=”group” à la balise fieldset. De plus,
le message de validation et la balise legend sont liés au fieldset via l’attribut aria-labelledby.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--valid" aria-labelledby="radio-valid-legend radio-valid-desc-valid" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-valid-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-valid-1" name="radio-valid"> <label class="fr-label" for="radio-valid-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-valid-2" name="radio-valid"> <label class="fr-label" for="radio-valid-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-valid-3" name="radio-valid"> <label class="fr-label" for="radio-valid-3">Label radio </label> </div> </div> <p id="radio-valid-desc-valid" class="fr-valid-text"> Texte de validation </p> </fieldset> </div>


Pour les liste de boutons radio en ligne :

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--valid" aria-labelledby="radio-valid-inline-legend radio-valid-inline-desc-valid" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-valid-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group"> <input type="radio" id="radio-valid-inline-1" name="radio-valid-inline"> <label class="fr-label" for="radio-valid-inline-1">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-valid-inline-2" name="radio-valid-inline"> <label class="fr-label" for="radio-valid-inline-2">Label radio </label> </div> <div class="fr-radio-group"> <input type="radio" id="radio-valid-inline-3" name="radio-valid-inline"> <label class="fr-label" for="radio-valid-inline-3">Label radio </label> </div> </div> <p id="radio-valid-inline-desc-valid" class="fr-valid-text"> Texte de validation </p> </fieldset> </div>

 

Tailles

Le “bouton radio” est proposé par défaut en 24px (taille Medium - MD) ce choix a été fait pour optimiser l’ergonomie et l’accessibilité.

Il existe également une version plus petite 16 px / Small (SM) correspondant à la taille standard proposés par les navigateurs. Attention, la zone cliquable doit être suffisante pour l'utilisation au doigt sur écran tactile (44 px de hauteur).

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='radio-hint-el-sm-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group fr-radio-group--sm"> <input type="radio" id="radio-hint-el-sm-1" name="radio-hint-el-sm"> <label class="fr-label" for="radio-hint-el-sm-1">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group fr-radio-group--sm"> <input type="radio" id="radio-hint-el-sm-2" name="radio-hint-el-sm"> <label class="fr-label" for="radio-hint-el-sm-2">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group fr-radio-group--sm"> <input type="radio" id="radio-hint-el-sm-3" name="radio-hint-el-sm"> <label class="fr-label" for="radio-hint-el-sm-3">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> </div> </fieldset> </div>

Règles d’utilisation

Usage

Les boutons radios sont recommandés lorsque l’utilisateur doit choisir un élément parmi 2 à 5 choix possibles :

  • Au delà de 5 choix ou lorsque l’espace n’est pas suffisant, il est préférable d'utiliser une liste déroulante .

  • Si plusieurs choix sont possibles ou que la sélection n’est pas obligatoire, privilégier les cases à cocher.

Élément obligatoire

Ajoutez un astérisque à la fin du libellé de la balise legendpour informer qu’un élément est obligatoire.
Une légende explicative (“les champs obligatoires sont marqués d’un *”) doit être présente en haut du formulaire.
Si l’ensemble des éléments est obligatoire, indiquez-le au début du formulaire.

À noter, pour les autres éléments de formulaires vous pouvez consulter les composants champs de saisie , liste déroulante , barre de recherche et case à cocher

Accessibilité :

  • Les boutons radios doivent être regroupés dans une balise fieldset.

  • Une balise legend doit être présente car elle constitue l’en-tête du groupe de bouton.

  • Chaque bouton radio est lié à son libellé grâce aux attributs id et for (ex : <input id=”radio-01”><label for=”radio-01”>).

  • Les messages d'erreur ou de succès, s'ils sont présents, sont liés au groupe de boutons radio au niveau de la balise <fieldset>, par un role="group" et une liaison avec aria-labelledby qui référence la légende et le message.

Contenus :

Pour les titres (legend) et les libellés (label) :

  • Maintenir la cohérence : utilisez les mêmes termes à chaque fois.

  • Utiliser un libellé clair et concis.

  • Mettre uniquement la première lettre du libellé en majuscule, N’utilisez pas de ponctuation à la fin d’un libellé.

  • Un texte d’aide clarifie la nature du contenu attendu - si cette information est essentielle, éviter de la masquer dans un tooltip ou infobox.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :