Boutons radio 'riches' - Radio buttons extended

Les boutons radio riches permettent de sélectionner un choix parmi une liste d’options illustrées.

Bouton radio riche

A la différence du bouton radio simple, l’image permet d’illustrer et d’accompagner l’utilisateur dans son choix.

Structure

Un bouton radio riche est composé :

  • D’un bouton radio - obligatoire

  • D’un label - obligatoire

  • D’un séparateur - obligatoire

  • D’une image - obligatoire

  • D’une description - optionnelle

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

La largeur du bouton peut-être définie selon la grille proposée par le DSFR de l’Etat.

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" id='radio-rich-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-1" name="radio-rich"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-1" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-2" name="radio-rich"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-2" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-3" name="radio-rich"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-3" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> </div> </fieldset> </div>

Comme les boutons radio, les boutons radios riche sont à utiliser en groupe en respectant les espacements définis ci-dessous. (en savoir plus sur les espacements Espacement - Spacing)

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" id='radio-rich-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-inline-1" name="radio-rich-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-inline-1" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-inline-2" name="radio-rich-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-inline-2" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-inline-3" name="radio-rich-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-inline-3" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> </div> </fieldset> </div>

 

Bouton radio riche avec description

Les boutons radio riches peuvent également afficher un texte de description en ajoutant un <span class="fr-hint-text" id="radio-rich-1-desc-hint">Texte descriptif</span> dans la balise </label> comme indiqué ci-dessous.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend" id='radio-rich-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-1" name="radio-rich"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-1" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-2" name="radio-rich"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-2" style="background-image: url(../img/placeholder.1x1.png)">Label radio </label> </div> </div> </fieldset>

 

É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 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 28 29 30 31 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--error" aria-labelledby="radio-rich-error-inline-legend radio-rich-error-inline-desc-error" role="group"> <legend class="fr-fieldset__legend" id='radio-rich-error-inline-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 fr-radio-rich"> <input type="radio" id="radio-rich-error-inline-1" name="radio-rich-error-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-error-inline-1" style="background-image: url(../img/placeholder.1x1.png)">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-error-inline-2" name="radio-rich-error-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-error-inline-2" style="background-image: url(../img/placeholder.1x1.png)">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-radio-group fr-radio-rich"> <input type="radio" id="radio-rich-error-inline-3" name="radio-rich-error-inline"> <label class="fr-ifi-no-icon fr-label" for="radio-rich-error-inline-3" style="background-image: url(../img/placeholder.1x1.png)">Label radio <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> </div> <p id="radio-rich-error-inline-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </fieldset> </div>

 

Responsive

En mobile , les composants bouton radio riche s’affichent automatiquement les uns en dessus des autres. L’espacement à respecter entre chaque boutons est de 2W. (Voir la documentation Espacement)

 

Règles d’utilisation

Les règles d’utilisation du bouton radio riches sont identiques à celles déjà explicité sur les boutons radio .

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 :