Boutons radio riches - Radio buttons extended

Les boutons radio riches permettent de sélectionner un choix parmi une liste d’options illustrées. À 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 :link: proposée par le Système de Design de l’État. 

Légende pour l’ensemble de champs
                <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-label" for="radio-rich-1">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-2" name="radio-rich">
                <label class="fr-label" for="radio-rich-2">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-3" name="radio-rich">
                <label class="fr-label" for="radio-rich-3">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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).

Légende pour l’ensemble de champs
                <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-label" for="radio-rich-inline-1">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-inline-2" name="radio-rich-inline">
                <label class="fr-label" for="radio-rich-inline-2">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-inline-3" name="radio-rich-inline">
                <label class="fr-label" for="radio-rich-inline-3">Label radio
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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.

Légende pour l’ensemble de champs texte additionel
                <div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend">
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">texte additionel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-hint-1" name="radio-rich-hint">
                <label class="fr-label" for="radio-rich-hint-1">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-hint-2" name="radio-rich-hint">
                <label class="fr-label" for="radio-rich-hint-2">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-rich-hint-3" name="radio-rich-hint">
                <label class="fr-label" for="radio-rich-hint-3">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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 :link: : 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.

Légende pour l’ensemble de champs texte additionel

Texte d’erreur obligatoire

                <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 additionel</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-label" for="radio-rich-error-inline-1">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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-label" for="radio-rich-error-inline-2">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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-label" for="radio-rich-error-inline-3">Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="./img/placeholder.1x1.png" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </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 :