Interrupteur (toggle)

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

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

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

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

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

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

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

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

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

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

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

<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" id="group-1-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" id="group-1-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" id="group-1-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" id="group-1-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" id="group-1-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-3913" aria-labelledby="toggle-group-3913-legend toggle-group-3913-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3913-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-39140">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39140" aria-describedby="toggle-39140-messages">
                    <label class="fr-toggle__label" for="toggle-39140">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39140-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39141">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39141" aria-describedby="toggle-39141-messages">
                    <label class="fr-toggle__label" for="toggle-39141">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39141-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39142">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39142" aria-describedby="toggle-39142-messages">
                    <label class="fr-toggle__label" for="toggle-39142">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39142-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39143">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39143" aria-describedby="toggle-39143-messages">
                    <label class="fr-toggle__label" for="toggle-39143">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39143-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-39144">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39144" aria-describedby="toggle-39144-messages">
                    <label class="fr-toggle__label" for="toggle-39144">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-39144-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3913-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="toggle-group-3923" aria-labelledby="toggle-group-3923-legend toggle-group-3923-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3923-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-39240">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39240" aria-describedby="toggle-hint-3925 toggle-39240-messages">
                    <label class="fr-toggle__label" for="toggle-39240">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3925">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39240-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39241">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39241" aria-describedby="toggle-hint-3926 toggle-39241-messages">
                    <label class="fr-toggle__label" for="toggle-39241">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3926">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39241-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39242">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39242" aria-describedby="toggle-hint-3927 toggle-39242-messages">
                    <label class="fr-toggle__label" for="toggle-39242">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3927">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39242-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39243">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39243" aria-describedby="toggle-hint-3928 toggle-39243-messages">
                    <label class="fr-toggle__label" for="toggle-39243">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3928">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39243-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-39244">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39244" aria-describedby="toggle-hint-3929 toggle-39244-messages">
                    <label class="fr-toggle__label" for="toggle-39244">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3929">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39244-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3923-messages" aria-live="polite">
    </div>
</fieldset>

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

<fieldset class="fr-fieldset" id="toggle-group-3943" aria-labelledby="toggle-group-3943-legend toggle-group-3943-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3943-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-39440">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39440" aria-describedby="toggle-hint-3945 toggle-39440-messages">
                    <label class="fr-toggle__label" for="toggle-39440" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3945">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39440-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39441">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39441" aria-describedby="toggle-hint-3946 toggle-39441-messages">
                    <label class="fr-toggle__label" for="toggle-39441" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3946">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39441-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39442">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39442" aria-describedby="toggle-hint-3947 toggle-39442-messages">
                    <label class="fr-toggle__label" for="toggle-39442" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3947">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39442-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39443">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39443" aria-describedby="toggle-hint-3948 toggle-39443-messages">
                    <label class="fr-toggle__label" for="toggle-39443" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3948">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39443-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-39444">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39444" aria-describedby="toggle-hint-3949 toggle-39444-messages">
                    <label class="fr-toggle__label" for="toggle-39444" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3949">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39444-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3943-messages" aria-live="polite">
    </div>
</fieldset>

<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-3958" role="group" aria-labelledby="toggle-group-3958-legend toggle-group-3958-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3958-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-39590">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39590" aria-describedby="toggle-hint-3960 toggle-39590-messages">
                    <label class="fr-toggle__label" for="toggle-39590" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3960">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39590-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39591">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39591" aria-describedby="toggle-hint-3961 toggle-39591-messages">
                    <label class="fr-toggle__label" for="toggle-39591" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3961">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39591-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39592">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39592" aria-describedby="toggle-hint-3962 toggle-39592-messages">
                    <label class="fr-toggle__label" for="toggle-39592" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3962">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39592-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39593">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39593" aria-describedby="toggle-hint-3963 toggle-39593-messages">
                    <label class="fr-toggle__label" for="toggle-39593" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3963">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39593-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-39594">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39594" aria-describedby="toggle-hint-3964 toggle-39594-messages">
                    <label class="fr-toggle__label" for="toggle-39594" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3964">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39594-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3958-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-3958-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-3973" role="group" aria-labelledby="toggle-group-3973-legend toggle-group-3973-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3973-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-39740">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39740" aria-describedby="toggle-hint-3975 toggle-39740-messages">
                    <label class="fr-toggle__label" for="toggle-39740" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3975">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39740-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39741">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39741" aria-describedby="toggle-hint-3976 toggle-39741-messages">
                    <label class="fr-toggle__label" for="toggle-39741" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3976">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39741-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39742">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39742" aria-describedby="toggle-hint-3977 toggle-39742-messages">
                    <label class="fr-toggle__label" for="toggle-39742" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3977">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39742-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39743">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39743" aria-describedby="toggle-hint-3978 toggle-39743-messages">
                    <label class="fr-toggle__label" for="toggle-39743" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3978">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39743-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39744">
                    <input type="checkbox" class="fr-toggle__input" id="toggle-39744" aria-describedby="toggle-hint-3979 toggle-39744-messages">
                    <label class="fr-toggle__label" for="toggle-39744" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="toggle-hint-3979">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-39744-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3973-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-3973-message-valid">Texte de validation</p>
    </div>
</fieldset>