Retour

Bouton radio (radio)

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

Documentation

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

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.