Retour

Bouton radio (radio)

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

Documentation

Bouton radio simple

Ensemble de boutons radio

Légende pour l’ensemble de champs 

<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 checked 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>

Ensemble de boutons radio, petite taille

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-small-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-small-1" name="radio-small">
                <label class="fr-label" for="radio-small-1">
                    Label radio
                </label>
            </div>
            <div class="fr-radio-group fr-radio-group--sm">
                <input checked type="radio" id="radio-small-2" name="radio-small">
                <label class="fr-label" for="radio-small-2">
                    Label radio
                </label>
            </div>
            <div class="fr-radio-group fr-radio-group--sm">
                <input type="radio" id="radio-small-3" name="radio-small">
                <label class="fr-label" for="radio-small-3">
                    Label radio
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio désactivées

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <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 disabled 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 disabled checked 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 disabled type="radio" id="radio-disabled-3" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-3">
                    Label radio
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio en ligne

Légende pour l’ensemble de champs 

<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>

Ensemble de boutons radio avec texte d‘aide

Légende pour l’ensemble de champs 

<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
        </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
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </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
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </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
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio avec erreur

Légende pour l’ensemble de champs

Texte d’erreur obligatoire 

<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>

Ensemble de boutons radio avec erreur, en ligne

Légende pour l’ensemble de champs

Texte d’erreur obligatoire 

<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>

Ensemble de boutons radio validés

Légende pour l’ensemble de champs

Texte de validation 

<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>

Ensemble de boutons radio validés, en ligne

Légende pour l’ensemble de champs

Texte de validation 

<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>

Ensemble de boutons radio avec texte d‘aide spécifique

Légende pour l’ensemble de champs 

<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>

Ensemble de boutons radio avec texte d‘aide spécifique, petite taille

Légende pour l’ensemble de champs 

<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>

Ensemble de boutons radio, libellé en indice et exposant

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-sub-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-sub-1" name="radio-sub">
                <label class="fr-label" for="radio-sub-1">
                    <span>Label radio <sup>sup</sup>
                        <sub>sub</sub>
                    </span>
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-sub-2" name="radio-sub">
                <label class="fr-label" for="radio-sub-2">
                    <span>Label radio <sup>sup</sup>
                        <sub>sub</sub>
                    </span>
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-sub-3" name="radio-sub">
                <label class="fr-label" for="radio-sub-3">
                    <span>Label radio <sup>sup</sup>
                        <sub>sub</sub>
                    </span>
                </label>
            </div>
        </div>
    </fieldset>
</div>

Bouton radio riche

Ensemble de boutons radio riches, simple

Légende pour l’ensemble de champs
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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 checked 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Ensemble de boutons radio riches, en ligne, simple

Légende pour l’ensemble de champs
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline">
        <legend class="fr-fieldset__legend fr-text--regular" 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Ensemble de boutons radio riches avec textes d'aide

Légende pour l’ensemble de champs texte additionel
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-rich-hint-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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Ensemble de boutons radio riches avec textes d'aide, en ligne

Légende pour l’ensemble de champs texte additionel
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-rich-hint-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-hint-inline-1" name="radio-rich-hint-inline">
                <label class="fr-label" for="radio-rich-hint-inline-1">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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-inline-2" name="radio-rich-hint-inline">
                <label class="fr-label" for="radio-rich-hint-inline-2">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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-inline-3" name="radio-rich-hint-inline">
                <label class="fr-label" for="radio-rich-hint-inline-3">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Ensemble de boutons radio riches avec erreur et textes d'aide

Légende pour l’ensemble de champs texte additionel
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]

Texte d’erreur obligatoire 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="radio-rich-error-legend radio-rich-error-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-rich-error-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-1" name="radio-rich-error">
                <label class="fr-label" for="radio-rich-error-1">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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-2" name="radio-rich-error">
                <label class="fr-label" for="radio-rich-error-2">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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-3" name="radio-rich-error">
                <label class="fr-label" for="radio-rich-error-3">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de boutons radio riches avec erreur et textes d'aide, en ligne

Légende pour l’ensemble de champs texte additionel
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]

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 fr-text--regular" 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Ensemble de boutons radio riches désactivés

Légende pour l’ensemble de champs
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image]
[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-rich-disabled-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group fr-radio-rich">
                <input disabled type="radio" id="radio-rich-disabled-1" name="radio-rich-disabled">
                <label class="fr-label" for="radio-rich-disabled-1">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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 disabled checked type="radio" id="radio-rich-disabled-2" name="radio-rich-disabled">
                <label class="fr-label" for="radio-rich-disabled-2">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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 disabled type="radio" id="radio-rich-disabled-3" name="radio-rich-disabled">
                <label class="fr-label" for="radio-rich-disabled-3">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-radio-rich__img">
                    <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- 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>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.