Interrupteur (toggle)

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

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

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

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

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

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

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

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

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

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

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

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

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

<fieldset class="fr-fieldset" id="toggle-group-3903" aria-labelledby="toggle-group-3903-legend toggle-group-3903-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3903-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-39040">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39040" aria-describedby="toggle-39040-messages">
                    <label class="fr-toggle__label" for="toggle-39040">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39040-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-39041">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39041" aria-describedby="toggle-39041-messages">
                    <label class="fr-toggle__label" for="toggle-39041">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39041-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-39042">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39042" aria-describedby="toggle-39042-messages">
                    <label class="fr-toggle__label" for="toggle-39042">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39042-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-39043">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39043" aria-describedby="toggle-39043-messages">
                    <label class="fr-toggle__label" for="toggle-39043">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39043-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle" id="group-1-toggle-39044">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39044" aria-describedby="toggle-39044-messages">
                    <label class="fr-toggle__label" for="toggle-39044">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39044-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3903-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="toggle-group-3908" aria-labelledby="toggle-group-3908-legend toggle-group-3908-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3908-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-39090">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39090" aria-describedby="toggle-39090-messages">
                    <label class="fr-toggle__label" for="toggle-39090">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39090-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39091">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39091" aria-describedby="toggle-39091-messages">
                    <label class="fr-toggle__label" for="toggle-39091">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39091-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39092">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39092" aria-describedby="toggle-39092-messages">
                    <label class="fr-toggle__label" for="toggle-39092">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39092-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39093">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39093" aria-describedby="toggle-39093-messages">
                    <label class="fr-toggle__label" for="toggle-39093">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39093-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39094">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39094" aria-describedby="toggle-39094-messages">
                    <label class="fr-toggle__label" for="toggle-39094">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39094-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3908-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="toggle-group-3918" aria-labelledby="toggle-group-3918-legend toggle-group-3918-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3918-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-39190">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39190" aria-describedby="toggle-hint-3920 toggle-39190-messages">
                    <label class="fr-toggle__label" for="toggle-39190">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3920">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39190-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39191">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39191" aria-describedby="toggle-hint-3921 toggle-39191-messages">
                    <label class="fr-toggle__label" for="toggle-39191">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3921">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39191-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39192">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39192" aria-describedby="toggle-hint-3922 toggle-39192-messages">
                    <label class="fr-toggle__label" for="toggle-39192">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3922">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39192-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39193">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39193" aria-describedby="toggle-hint-3923 toggle-39193-messages">
                    <label class="fr-toggle__label" for="toggle-39193">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3923">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39193-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39194">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39194" aria-describedby="toggle-hint-3924 toggle-39194-messages">
                    <label class="fr-toggle__label" for="toggle-39194">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3924">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39194-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3918-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="toggle-group-3928" aria-labelledby="toggle-group-3928-legend toggle-group-3928-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3928-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-39290">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39290" aria-describedby="toggle-39290-messages">
                    <label class="fr-toggle__label" for="toggle-39290" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39290-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-39291">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39291" aria-describedby="toggle-39291-messages">
                    <label class="fr-toggle__label" for="toggle-39291" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39291-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-39292">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39292" aria-describedby="toggle-39292-messages">
                    <label class="fr-toggle__label" for="toggle-39292" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39292-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-39293">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39293" aria-describedby="toggle-39293-messages">
                    <label class="fr-toggle__label" for="toggle-39293" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39293-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-39294">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39294" aria-describedby="toggle-39294-messages">
                    <label class="fr-toggle__label" for="toggle-39294" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39294-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3928-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="toggle-group-3938" aria-labelledby="toggle-group-3938-legend toggle-group-3938-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3938-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-39390">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39390" aria-describedby="toggle-hint-3940 toggle-39390-messages">
                    <label class="fr-toggle__label" for="toggle-39390" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3940">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39390-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39391">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39391" aria-describedby="toggle-hint-3941 toggle-39391-messages">
                    <label class="fr-toggle__label" for="toggle-39391" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3941">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39391-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39392">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39392" aria-describedby="toggle-hint-3942 toggle-39392-messages">
                    <label class="fr-toggle__label" for="toggle-39392" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3942">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39392-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39393">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39393" aria-describedby="toggle-hint-3943 toggle-39393-messages">
                    <label class="fr-toggle__label" for="toggle-39393" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3943">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39393-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39394">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39394" aria-describedby="toggle-hint-3944 toggle-39394-messages">
                    <label class="fr-toggle__label" for="toggle-39394" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3944">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39394-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3938-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-3953" role="group" aria-labelledby="toggle-group-3953-legend toggle-group-3953-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3953-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-39540">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39540" aria-describedby="toggle-hint-3955 toggle-39540-messages">
                    <label class="fr-toggle__label" for="toggle-39540" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3955">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39540-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39541">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39541" aria-describedby="toggle-hint-3956 toggle-39541-messages">
                    <label class="fr-toggle__label" for="toggle-39541" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3956">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39541-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39542">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39542" aria-describedby="toggle-hint-3957 toggle-39542-messages">
                    <label class="fr-toggle__label" for="toggle-39542" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3957">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39542-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39543">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39543" aria-describedby="toggle-hint-3958 toggle-39543-messages">
                    <label class="fr-toggle__label" for="toggle-39543" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3958">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39543-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39544">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39544" aria-describedby="toggle-hint-3959 toggle-39544-messages">
                    <label class="fr-toggle__label" for="toggle-39544" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3959">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39544-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3953-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-3953-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-3968" role="group" aria-labelledby="toggle-group-3968-legend toggle-group-3968-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3968-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-39690">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39690" aria-describedby="toggle-hint-3970 toggle-39690-messages">
                    <label class="fr-toggle__label" for="toggle-39690" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3970">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39690-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39691">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39691" aria-describedby="toggle-hint-3971 toggle-39691-messages">
                    <label class="fr-toggle__label" for="toggle-39691" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3971">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39691-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39692">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39692" aria-describedby="toggle-hint-3972 toggle-39692-messages">
                    <label class="fr-toggle__label" for="toggle-39692" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3972">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39692-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39693">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39693" aria-describedby="toggle-hint-3973 toggle-39693-messages">
                    <label class="fr-toggle__label" for="toggle-39693" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3973">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39693-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39694">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39694" aria-describedby="toggle-hint-3974 toggle-39694-messages">
                    <label class="fr-toggle__label" for="toggle-39694" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3974">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39694-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3968-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-3968-message-valid">Texte de validation</p>
    </div>
</fieldset>