DSFR v1.13.1

Retour

Interrupteur (toggle)

Le composant “Interrupteur” permet à l’utilisateur de faire un choix entre deux états opposés (activé / désactivé).

Documentation

Toggle simple avec bouton + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4161" aria-describedby="toggle-4161-messages">
    <label class="fr-toggle__label" for="toggle-4161">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4161-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à droite + texte d’aide

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4165" aria-describedby="toggle-hint-4166 toggle-4165-messages">
    <label class="fr-toggle__label" for="toggle-4165">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4166">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4165-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4169" aria-describedby="toggle-4169-messages">
    <label class="fr-toggle__label" for="toggle-4169" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4169-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à droite + état + texte d’aide

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4173" aria-describedby="toggle-hint-4174 toggle-4173-messages">
    <label class="fr-toggle__label" for="toggle-4173" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4174">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4173-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à droite + état + séparateur

<div class="fr-toggle fr-toggle--border-bottom">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4177" aria-describedby="toggle-4177-messages">
    <label class="fr-toggle__label" for="toggle-4177" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4177-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à droite + état + séparateur + texte d’aide

Texte de description additionnel

<div class="fr-toggle fr-toggle--border-bottom">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4181" aria-describedby="toggle-hint-4182 toggle-4181-messages">
    <label class="fr-toggle__label" for="toggle-4181" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4182">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4181-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4185" disabled aria-describedby="toggle-4185-messages">
    <label class="fr-toggle__label" for="toggle-4185">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4185-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4188" disabled aria-describedby="toggle-4188-messages">
    <label class="fr-toggle__label" for="toggle-4188" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4188-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled et pré-coché avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4191" disabled checked aria-describedby="toggle-4191-messages">
    <label class="fr-toggle__label" for="toggle-4191" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4191-messages" aria-live="polite">
    </div>
</div>

Toggle simple en erreur

Texte d’erreur obligatoire

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4194" aria-describedby="toggle-4194-messages">
    <label class="fr-toggle__label" for="toggle-4194">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4194-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4194-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

Toggle avec état - en erreur

Texte d’erreur obligatoire

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4197" aria-describedby="toggle-4197-messages">
    <label class="fr-toggle__label" for="toggle-4197" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4197-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4197-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

Toggle simple valide

Texte de validation

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4200" aria-describedby="toggle-4200-messages">
    <label class="fr-toggle__label" for="toggle-4200">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4200-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4200-message-valid">Texte de validation</p>
    </div>
</div>

Toggle avec état - valide

Texte de validation

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4203" aria-describedby="toggle-4203-messages">
    <label class="fr-toggle__label" for="toggle-4203" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4203-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4203-message-valid">Texte de validation</p>
    </div>
</div>

Groupe de toggles simple avec bouton + libellé à droite

Légende pour l’ensemble des éléments

<fieldset class="fr-fieldset" id="toggle-group-4207" aria-labelledby="toggle-group-4207-legend toggle-group-4207-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4207-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle" id="group-1-toggle-42080">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42080" aria-describedby="toggle-42080-messages">
                    <label class="fr-toggle__label" for="toggle-42080">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42080-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42081">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42081" aria-describedby="toggle-42081-messages">
                    <label class="fr-toggle__label" for="toggle-42081">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42081-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42082">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42082" aria-describedby="toggle-42082-messages">
                    <label class="fr-toggle__label" for="toggle-42082">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42082-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42083">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42083" aria-describedby="toggle-42083-messages">
                    <label class="fr-toggle__label" for="toggle-42083">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42083-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42084">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42084" aria-describedby="toggle-42084-messages">
                    <label class="fr-toggle__label" for="toggle-42084">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42084-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4207-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + séparateur

Légende pour l’ensemble des éléments

<fieldset class="fr-fieldset" id="toggle-group-4212" aria-labelledby="toggle-group-4212-legend toggle-group-4212-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4212-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42130">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42130" aria-describedby="toggle-42130-messages">
                    <label class="fr-toggle__label" for="toggle-42130">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42130-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42131">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42131" aria-describedby="toggle-42131-messages">
                    <label class="fr-toggle__label" for="toggle-42131">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42131-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42132">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42132" aria-describedby="toggle-42132-messages">
                    <label class="fr-toggle__label" for="toggle-42132">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42132-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42133">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42133" aria-describedby="toggle-42133-messages">
                    <label class="fr-toggle__label" for="toggle-42133">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42133-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42134">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42134" aria-describedby="toggle-42134-messages">
                    <label class="fr-toggle__label" for="toggle-42134">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42134-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4212-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + séparateur + texte d’aide

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4222" aria-labelledby="toggle-group-4222-legend toggle-group-4222-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4222-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42230">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42230" aria-describedby="toggle-hint-4224 toggle-42230-messages">
                    <label class="fr-toggle__label" for="toggle-42230">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4224">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42230-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42231">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42231" aria-describedby="toggle-hint-4225 toggle-42231-messages">
                    <label class="fr-toggle__label" for="toggle-42231">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4225">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42231-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42232">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42232" aria-describedby="toggle-hint-4226 toggle-42232-messages">
                    <label class="fr-toggle__label" for="toggle-42232">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4226">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42232-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42233">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42233" aria-describedby="toggle-hint-4227 toggle-42233-messages">
                    <label class="fr-toggle__label" for="toggle-42233">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4227">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42233-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42234">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42234" aria-describedby="toggle-hint-4228 toggle-42234-messages">
                    <label class="fr-toggle__label" for="toggle-42234">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4228">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42234-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4222-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur

Légende pour l’ensemble des éléments

<fieldset class="fr-fieldset" id="toggle-group-4232" aria-labelledby="toggle-group-4232-legend toggle-group-4232-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4232-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42330">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42330" aria-describedby="toggle-42330-messages">
                    <label class="fr-toggle__label" for="toggle-42330" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42330-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42331">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42331" aria-describedby="toggle-42331-messages">
                    <label class="fr-toggle__label" for="toggle-42331" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42331-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42332">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42332" aria-describedby="toggle-42332-messages">
                    <label class="fr-toggle__label" for="toggle-42332" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42332-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42333">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42333" aria-describedby="toggle-42333-messages">
                    <label class="fr-toggle__label" for="toggle-42333" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42333-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42334">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42334" aria-describedby="toggle-42334-messages">
                    <label class="fr-toggle__label" for="toggle-42334" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42334-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4232-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur + texte d’aide

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4242" aria-labelledby="toggle-group-4242-legend toggle-group-4242-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4242-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42430">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42430" aria-describedby="toggle-hint-4244 toggle-42430-messages">
                    <label class="fr-toggle__label" for="toggle-42430" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4244">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42430-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42431">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42431" aria-describedby="toggle-hint-4245 toggle-42431-messages">
                    <label class="fr-toggle__label" for="toggle-42431" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4245">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42431-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42432">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42432" aria-describedby="toggle-hint-4246 toggle-42432-messages">
                    <label class="fr-toggle__label" for="toggle-42432" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4246">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42432-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42433">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42433" aria-describedby="toggle-hint-4247 toggle-42433-messages">
                    <label class="fr-toggle__label" for="toggle-42433" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4247">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42433-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42434">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42434" aria-describedby="toggle-hint-4248 toggle-42434-messages">
                    <label class="fr-toggle__label" for="toggle-42434" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4248">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42434-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4242-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur + texte d’aide + erreur

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

Texte d’erreur obligatoire

<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-4257" role="group" aria-labelledby="toggle-group-4257-legend toggle-group-4257-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4257-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42580">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42580" aria-describedby="toggle-hint-4259 toggle-42580-messages">
                    <label class="fr-toggle__label" for="toggle-42580" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4259">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42580-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42581">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42581" aria-describedby="toggle-hint-4260 toggle-42581-messages">
                    <label class="fr-toggle__label" for="toggle-42581" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4260">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42581-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42582">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42582" aria-describedby="toggle-hint-4261 toggle-42582-messages">
                    <label class="fr-toggle__label" for="toggle-42582" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4261">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42582-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42583">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42583" aria-describedby="toggle-hint-4262 toggle-42583-messages">
                    <label class="fr-toggle__label" for="toggle-42583" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4262">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42583-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42584">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42584" aria-describedby="toggle-hint-4263 toggle-42584-messages">
                    <label class="fr-toggle__label" for="toggle-42584" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4263">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42584-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4257-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-4257-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur + texte d’aide + valide

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

Texte de validation

<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-4272" role="group" aria-labelledby="toggle-group-4272-legend toggle-group-4272-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4272-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42730">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42730" aria-describedby="toggle-hint-4274 toggle-42730-messages">
                    <label class="fr-toggle__label" for="toggle-42730" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4274">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42730-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42731">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42731" aria-describedby="toggle-hint-4275 toggle-42731-messages">
                    <label class="fr-toggle__label" for="toggle-42731" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4275">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42731-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42732">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42732" aria-describedby="toggle-hint-4276 toggle-42732-messages">
                    <label class="fr-toggle__label" for="toggle-42732" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4276">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42732-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42733">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42733" aria-describedby="toggle-hint-4277 toggle-42733-messages">
                    <label class="fr-toggle__label" for="toggle-42733" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4277">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42733-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42734">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42734" aria-describedby="toggle-hint-4278 toggle-42734-messages">
                    <label class="fr-toggle__label" for="toggle-42734" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4278">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42734-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4272-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-4272-message-valid">Texte de validation</p>
    </div>
</fieldset>

Toggle simple avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4281" aria-describedby="toggle-4281-messages">
    <label class="fr-toggle__label" for="toggle-4281">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4281-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à gauche + texte d’aide

Texte de description additionnel

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4285" aria-describedby="toggle-hint-4286 toggle-4285-messages">
    <label class="fr-toggle__label" for="toggle-4285">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4286">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4285-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à gauche + état

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4289" aria-describedby="toggle-4289-messages">
    <label class="fr-toggle__label" for="toggle-4289" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4289-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à gauche + état + texte d’aide

Texte de description additionnel

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4293" aria-describedby="toggle-hint-4294 toggle-4293-messages">
    <label class="fr-toggle__label" for="toggle-4293" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4294">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4293-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à gauche + état + séparateur

<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4297" aria-describedby="toggle-4297-messages">
    <label class="fr-toggle__label" for="toggle-4297" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4297-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à gauche + état + séparateur + texte d’aide

Texte de description additionnel

<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4301" aria-describedby="toggle-hint-4302 toggle-4301-messages">
    <label class="fr-toggle__label" for="toggle-4301" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4302">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4301-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4305" disabled aria-describedby="toggle-4305-messages">
    <label class="fr-toggle__label" for="toggle-4305">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4305-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à gauche + état

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4308" disabled aria-describedby="toggle-4308-messages">
    <label class="fr-toggle__label" for="toggle-4308" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4308-messages" aria-live="polite">
    </div>
</div>

Groupe de toggles simple avec bouton + libellé à gauche + séparateur

Légende pour l’ensemble des éléments

<fieldset class="fr-fieldset" id="toggle-group-4312" aria-labelledby="toggle-group-4312-legend toggle-group-4312-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4312-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43130">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43130" aria-describedby="toggle-43130-messages">
                    <label class="fr-toggle__label" for="toggle-43130">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43130-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43131">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43131" aria-describedby="toggle-43131-messages">
                    <label class="fr-toggle__label" for="toggle-43131">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43131-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43132">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43132" aria-describedby="toggle-43132-messages">
                    <label class="fr-toggle__label" for="toggle-43132">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43132-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43133">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43133" aria-describedby="toggle-43133-messages">
                    <label class="fr-toggle__label" for="toggle-43133">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43133-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43134">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43134" aria-describedby="toggle-43134-messages">
                    <label class="fr-toggle__label" for="toggle-43134">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43134-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4312-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à gauche + séparateur + texte d’aide

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4322" aria-labelledby="toggle-group-4322-legend toggle-group-4322-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4322-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43230">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43230" aria-describedby="toggle-hint-4324 toggle-43230-messages">
                    <label class="fr-toggle__label" for="toggle-43230">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4324">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43230-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43231">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43231" aria-describedby="toggle-hint-4325 toggle-43231-messages">
                    <label class="fr-toggle__label" for="toggle-43231">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4325">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43231-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43232">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43232" aria-describedby="toggle-hint-4326 toggle-43232-messages">
                    <label class="fr-toggle__label" for="toggle-43232">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4326">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43232-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43233">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43233" aria-describedby="toggle-hint-4327 toggle-43233-messages">
                    <label class="fr-toggle__label" for="toggle-43233">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4327">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43233-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43234">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43234" aria-describedby="toggle-hint-4328 toggle-43234-messages">
                    <label class="fr-toggle__label" for="toggle-43234">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4328">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43234-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4322-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à gauche + état + séparateur

Légende pour l’ensemble des éléments

<fieldset class="fr-fieldset" id="toggle-group-4332" aria-labelledby="toggle-group-4332-legend toggle-group-4332-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4332-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43330">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43330" aria-describedby="toggle-43330-messages">
                    <label class="fr-toggle__label" for="toggle-43330" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43330-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43331">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43331" aria-describedby="toggle-43331-messages">
                    <label class="fr-toggle__label" for="toggle-43331" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43331-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43332">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43332" aria-describedby="toggle-43332-messages">
                    <label class="fr-toggle__label" for="toggle-43332" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43332-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43333">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43333" aria-describedby="toggle-43333-messages">
                    <label class="fr-toggle__label" for="toggle-43333" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43333-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43334">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43334" aria-describedby="toggle-43334-messages">
                    <label class="fr-toggle__label" for="toggle-43334" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43334-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4332-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à gauche + état + séparateur + texte d’aide

Légende pour l’ensemble des éléments
  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4342" aria-labelledby="toggle-group-4342-legend toggle-group-4342-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4342-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43430">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43430" aria-describedby="toggle-hint-4344 toggle-43430-messages">
                    <label class="fr-toggle__label" for="toggle-43430" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4344">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43430-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43431">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43431" aria-describedby="toggle-hint-4345 toggle-43431-messages">
                    <label class="fr-toggle__label" for="toggle-43431" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4345">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43431-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43432">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43432" aria-describedby="toggle-hint-4346 toggle-43432-messages">
                    <label class="fr-toggle__label" for="toggle-43432" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4346">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43432-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43433">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43433" aria-describedby="toggle-hint-4347 toggle-43433-messages">
                    <label class="fr-toggle__label" for="toggle-43433" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4347">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43433-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43434">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43434" aria-describedby="toggle-hint-4348 toggle-43434-messages">
                    <label class="fr-toggle__label" for="toggle-43434" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4348">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43434-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4342-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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