DSFR v1.13.0

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-4156" aria-describedby="toggle-4156-messages">
    <label class="fr-toggle__label" for="toggle-4156">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4156-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-4160" aria-describedby="toggle-hint-4161 toggle-4160-messages">
    <label class="fr-toggle__label" for="toggle-4160">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4161">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4160-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-4164" aria-describedby="toggle-4164-messages">
    <label class="fr-toggle__label" for="toggle-4164" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4164-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-4168" aria-describedby="toggle-hint-4169 toggle-4168-messages">
    <label class="fr-toggle__label" for="toggle-4168" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4169">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4168-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-4172" aria-describedby="toggle-4172-messages">
    <label class="fr-toggle__label" for="toggle-4172" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4172-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-4176" aria-describedby="toggle-hint-4177 toggle-4176-messages">
    <label class="fr-toggle__label" for="toggle-4176" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4177">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4176-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-4180" disabled aria-describedby="toggle-4180-messages">
    <label class="fr-toggle__label" for="toggle-4180">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4180-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-4183" disabled aria-describedby="toggle-4183-messages">
    <label class="fr-toggle__label" for="toggle-4183" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4183-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-4186" disabled checked aria-describedby="toggle-4186-messages">
    <label class="fr-toggle__label" for="toggle-4186" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4186-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-4189" aria-describedby="toggle-4189-messages">
    <label class="fr-toggle__label" for="toggle-4189">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4189-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4189-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-4192" aria-describedby="toggle-4192-messages">
    <label class="fr-toggle__label" for="toggle-4192" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4192-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4192-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-4195" aria-describedby="toggle-4195-messages">
    <label class="fr-toggle__label" for="toggle-4195">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4195-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4195-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-4198" aria-describedby="toggle-4198-messages">
    <label class="fr-toggle__label" for="toggle-4198" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4198-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4198-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-4202" aria-labelledby="toggle-group-4202-legend toggle-group-4202-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4202-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-42030">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42030" aria-describedby="toggle-42030-messages">
                    <label class="fr-toggle__label" for="toggle-42030">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42030-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42031">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42031" aria-describedby="toggle-42031-messages">
                    <label class="fr-toggle__label" for="toggle-42031">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42031-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42032">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42032" aria-describedby="toggle-42032-messages">
                    <label class="fr-toggle__label" for="toggle-42032">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42032-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42033">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42033" aria-describedby="toggle-42033-messages">
                    <label class="fr-toggle__label" for="toggle-42033">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42033-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-42034">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42034" aria-describedby="toggle-42034-messages">
                    <label class="fr-toggle__label" for="toggle-42034">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42034-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4202-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-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 fr-toggle--border-bottom" id="group-2-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 fr-toggle--border-bottom" id="group-2-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 fr-toggle--border-bottom" id="group-2-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 fr-toggle--border-bottom" id="group-2-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 fr-toggle--border-bottom" id="group-2-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 + 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-4217" aria-labelledby="toggle-group-4217-legend toggle-group-4217-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4217-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-42180">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42180" aria-describedby="toggle-hint-4219 toggle-42180-messages">
                    <label class="fr-toggle__label" for="toggle-42180">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4219">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42180-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42181">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42181" aria-describedby="toggle-hint-4220 toggle-42181-messages">
                    <label class="fr-toggle__label" for="toggle-42181">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4220">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42181-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42182">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42182" aria-describedby="toggle-hint-4221 toggle-42182-messages">
                    <label class="fr-toggle__label" for="toggle-42182">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4221">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42182-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42183">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42183" aria-describedby="toggle-hint-4222 toggle-42183-messages">
                    <label class="fr-toggle__label" for="toggle-42183">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4222">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42183-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42184">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42184" aria-describedby="toggle-hint-4223 toggle-42184-messages">
                    <label class="fr-toggle__label" for="toggle-42184">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4223">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42184-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4217-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-4227" aria-labelledby="toggle-group-4227-legend toggle-group-4227-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4227-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-42280">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42280" aria-describedby="toggle-42280-messages">
                    <label class="fr-toggle__label" for="toggle-42280" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42280-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42281">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42281" aria-describedby="toggle-42281-messages">
                    <label class="fr-toggle__label" for="toggle-42281" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42281-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42282">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42282" aria-describedby="toggle-42282-messages">
                    <label class="fr-toggle__label" for="toggle-42282" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42282-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42283">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42283" aria-describedby="toggle-42283-messages">
                    <label class="fr-toggle__label" for="toggle-42283" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42283-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42284">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42284" aria-describedby="toggle-42284-messages">
                    <label class="fr-toggle__label" for="toggle-42284" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-42284-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4227-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-4237" aria-labelledby="toggle-group-4237-legend toggle-group-4237-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4237-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-42380">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42380" aria-describedby="toggle-hint-4239 toggle-42380-messages">
                    <label class="fr-toggle__label" for="toggle-42380" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4239">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42380-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42381">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42381" aria-describedby="toggle-hint-4240 toggle-42381-messages">
                    <label class="fr-toggle__label" for="toggle-42381" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4240">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42381-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42382">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42382" aria-describedby="toggle-hint-4241 toggle-42382-messages">
                    <label class="fr-toggle__label" for="toggle-42382" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4241">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42382-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42383">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42383" aria-describedby="toggle-hint-4242 toggle-42383-messages">
                    <label class="fr-toggle__label" for="toggle-42383" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4242">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42383-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42384">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42384" aria-describedby="toggle-hint-4243 toggle-42384-messages">
                    <label class="fr-toggle__label" for="toggle-42384" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4243">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42384-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4237-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-4252" role="group" aria-labelledby="toggle-group-4252-legend toggle-group-4252-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4252-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-42530">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42530" aria-describedby="toggle-hint-4254 toggle-42530-messages">
                    <label class="fr-toggle__label" for="toggle-42530" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4254">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42530-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42531">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42531" aria-describedby="toggle-hint-4255 toggle-42531-messages">
                    <label class="fr-toggle__label" for="toggle-42531" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4255">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42531-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42532">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42532" aria-describedby="toggle-hint-4256 toggle-42532-messages">
                    <label class="fr-toggle__label" for="toggle-42532" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4256">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42532-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42533">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42533" aria-describedby="toggle-hint-4257 toggle-42533-messages">
                    <label class="fr-toggle__label" for="toggle-42533" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4257">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42533-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42534">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42534" aria-describedby="toggle-hint-4258 toggle-42534-messages">
                    <label class="fr-toggle__label" for="toggle-42534" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4258">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42534-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4252-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-4252-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-4267" role="group" aria-labelledby="toggle-group-4267-legend toggle-group-4267-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4267-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-42680">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42680" aria-describedby="toggle-hint-4269 toggle-42680-messages">
                    <label class="fr-toggle__label" for="toggle-42680" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4269">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42680-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42681">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42681" aria-describedby="toggle-hint-4270 toggle-42681-messages">
                    <label class="fr-toggle__label" for="toggle-42681" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4270">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42681-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42682">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42682" aria-describedby="toggle-hint-4271 toggle-42682-messages">
                    <label class="fr-toggle__label" for="toggle-42682" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4271">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42682-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42683">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42683" aria-describedby="toggle-hint-4272 toggle-42683-messages">
                    <label class="fr-toggle__label" for="toggle-42683" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4272">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42683-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42684">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-42684" aria-describedby="toggle-hint-4273 toggle-42684-messages">
                    <label class="fr-toggle__label" for="toggle-42684" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4273">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-42684-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4267-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-4267-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-4276" aria-describedby="toggle-4276-messages">
    <label class="fr-toggle__label" for="toggle-4276">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4276-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-4280" aria-describedby="toggle-hint-4281 toggle-4280-messages">
    <label class="fr-toggle__label" for="toggle-4280">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4281">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4280-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-4284" aria-describedby="toggle-4284-messages">
    <label class="fr-toggle__label" for="toggle-4284" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4284-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-4288" aria-describedby="toggle-hint-4289 toggle-4288-messages">
    <label class="fr-toggle__label" for="toggle-4288" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4289">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4288-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-4292" aria-describedby="toggle-4292-messages">
    <label class="fr-toggle__label" for="toggle-4292" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4292-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-4296" aria-describedby="toggle-hint-4297 toggle-4296-messages">
    <label class="fr-toggle__label" for="toggle-4296" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-hint-4297">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4296-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-4300" disabled aria-describedby="toggle-4300-messages">
    <label class="fr-toggle__label" for="toggle-4300">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4300-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-4303" disabled aria-describedby="toggle-4303-messages">
    <label class="fr-toggle__label" for="toggle-4303" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4303-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-4307" aria-labelledby="toggle-group-4307-legend toggle-group-4307-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4307-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-43080">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43080" aria-describedby="toggle-43080-messages">
                    <label class="fr-toggle__label" for="toggle-43080">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43080-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43081">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43081" aria-describedby="toggle-43081-messages">
                    <label class="fr-toggle__label" for="toggle-43081">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43081-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43082">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43082" aria-describedby="toggle-43082-messages">
                    <label class="fr-toggle__label" for="toggle-43082">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43082-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43083">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43083" aria-describedby="toggle-43083-messages">
                    <label class="fr-toggle__label" for="toggle-43083">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43083-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43084">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43084" aria-describedby="toggle-43084-messages">
                    <label class="fr-toggle__label" for="toggle-43084">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43084-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4307-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-4317" aria-labelledby="toggle-group-4317-legend toggle-group-4317-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4317-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-43180">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43180" aria-describedby="toggle-hint-4319 toggle-43180-messages">
                    <label class="fr-toggle__label" for="toggle-43180">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4319">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43180-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43181">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43181" aria-describedby="toggle-hint-4320 toggle-43181-messages">
                    <label class="fr-toggle__label" for="toggle-43181">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4320">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43181-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43182">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43182" aria-describedby="toggle-hint-4321 toggle-43182-messages">
                    <label class="fr-toggle__label" for="toggle-43182">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4321">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43182-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43183">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43183" aria-describedby="toggle-hint-4322 toggle-43183-messages">
                    <label class="fr-toggle__label" for="toggle-43183">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4322">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43183-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43184">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43184" aria-describedby="toggle-hint-4323 toggle-43184-messages">
                    <label class="fr-toggle__label" for="toggle-43184">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4323">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43184-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4317-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-4327" aria-labelledby="toggle-group-4327-legend toggle-group-4327-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4327-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-43280">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43280" aria-describedby="toggle-43280-messages">
                    <label class="fr-toggle__label" for="toggle-43280" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43280-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43281">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43281" aria-describedby="toggle-43281-messages">
                    <label class="fr-toggle__label" for="toggle-43281" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43281-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43282">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43282" aria-describedby="toggle-43282-messages">
                    <label class="fr-toggle__label" for="toggle-43282" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43282-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43283">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43283" aria-describedby="toggle-43283-messages">
                    <label class="fr-toggle__label" for="toggle-43283" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43283-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43284">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43284" aria-describedby="toggle-43284-messages">
                    <label class="fr-toggle__label" for="toggle-43284" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-43284-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4327-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-4337" aria-labelledby="toggle-group-4337-legend toggle-group-4337-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4337-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-43380">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43380" aria-describedby="toggle-hint-4339 toggle-43380-messages">
                    <label class="fr-toggle__label" for="toggle-43380" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4339">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43380-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43381">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43381" aria-describedby="toggle-hint-4340 toggle-43381-messages">
                    <label class="fr-toggle__label" for="toggle-43381" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4340">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43381-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43382">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43382" aria-describedby="toggle-hint-4341 toggle-43382-messages">
                    <label class="fr-toggle__label" for="toggle-43382" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4341">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43382-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43383">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43383" aria-describedby="toggle-hint-4342 toggle-43383-messages">
                    <label class="fr-toggle__label" for="toggle-43383" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4342">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43383-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43384">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-43384" aria-describedby="toggle-hint-4343 toggle-43384-messages">
                    <label class="fr-toggle__label" for="toggle-43384" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-4343">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-43384-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4337-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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