DSFR v1.15.3
Le composant “Interrupteur” permet à l’utilisateur de faire un choix entre deux états opposés (activé / désactivé).
Documentation<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3872" aria-describedby="toggle-3872-messages">
<label class="fr-toggle__label" for="toggle-3872">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3872-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3876" aria-describedby="toggle-hint-3877 toggle-3876-messages">
<label class="fr-toggle__label" for="toggle-3876">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3877">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-3876-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3880" aria-describedby="toggle-3880-messages">
<label class="fr-toggle__label" for="toggle-3880" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3880-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3884" aria-describedby="toggle-hint-3885 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>
<p class="fr-hint-text" id="toggle-hint-3885">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-3884-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="toggle-3888" aria-describedby="toggle-3888-messages">
<label class="fr-toggle__label" for="toggle-3888" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3888-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="toggle-3892" aria-describedby="toggle-hint-3893 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>
<p class="fr-hint-text" id="toggle-hint-3893">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-3892-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3896" disabled 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">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3899" disabled 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">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-3902" disabled checked aria-describedby="toggle-3902-messages">
<label class="fr-toggle__label" for="toggle-3902" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3902-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--error">
<input type="checkbox" class="fr-toggle__input" id="toggle-3905" aria-describedby="toggle-3905-messages">
<label class="fr-toggle__label" for="toggle-3905">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3905-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-3905-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-3908" aria-describedby="toggle-3908-messages">
<label class="fr-toggle__label" for="toggle-3908" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3908-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-3908-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-3911" aria-describedby="toggle-3911-messages">
<label class="fr-toggle__label" for="toggle-3911">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3911-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-3911-message-valid">Texte de validation</p>
</div>
</div>
<div class="fr-toggle fr-toggle--valid">
<input type="checkbox" class="fr-toggle__input" id="toggle-3914" aria-describedby="toggle-3914-messages">
<label class="fr-toggle__label" for="toggle-3914" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3914-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-3914-message-valid">Texte de validation</p>
</div>
</div>
<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" id="group-1-toggle-39190">
<input type="checkbox" class="fr-toggle__input" id="toggle-39190" aria-describedby="toggle-39190-messages">
<label class="fr-toggle__label" for="toggle-39190">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-39190-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-39191">
<input type="checkbox" class="fr-toggle__input" id="toggle-39191" aria-describedby="toggle-39191-messages">
<label class="fr-toggle__label" for="toggle-39191">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-39191-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-39192">
<input type="checkbox" class="fr-toggle__input" id="toggle-39192" aria-describedby="toggle-39192-messages">
<label class="fr-toggle__label" for="toggle-39192">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-39192-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-39193">
<input type="checkbox" class="fr-toggle__input" id="toggle-39193" aria-describedby="toggle-39193-messages">
<label class="fr-toggle__label" for="toggle-39193">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-39193-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-39194">
<input type="checkbox" class="fr-toggle__input" id="toggle-39194" aria-describedby="toggle-39194-messages">
<label class="fr-toggle__label" for="toggle-39194">Libellé de l'interrupteur</label>
<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-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-2-toggle-39240">
<input type="checkbox" class="fr-toggle__input" id="toggle-39240" aria-describedby="toggle-39240-messages">
<label class="fr-toggle__label" for="toggle-39240">Libellé de l'interrupteur</label>
<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-2-toggle-39241">
<input type="checkbox" class="fr-toggle__input" id="toggle-39241" aria-describedby="toggle-39241-messages">
<label class="fr-toggle__label" for="toggle-39241">Libellé de l'interrupteur</label>
<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-2-toggle-39242">
<input type="checkbox" class="fr-toggle__input" id="toggle-39242" aria-describedby="toggle-39242-messages">
<label class="fr-toggle__label" for="toggle-39242">Libellé de l'interrupteur</label>
<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-2-toggle-39243">
<input type="checkbox" class="fr-toggle__input" id="toggle-39243" aria-describedby="toggle-39243-messages">
<label class="fr-toggle__label" for="toggle-39243">Libellé de l'interrupteur</label>
<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-2-toggle-39244">
<input type="checkbox" class="fr-toggle__input" id="toggle-39244" aria-describedby="toggle-39244-messages">
<label class="fr-toggle__label" for="toggle-39244">Libellé de l'interrupteur</label>
<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-3-toggle-39340">
<input type="checkbox" class="fr-toggle__input" id="toggle-39340" aria-describedby="toggle-hint-3935 toggle-39340-messages">
<label class="fr-toggle__label" for="toggle-39340">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3935">Texte de description additionnel</p>
<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-3-toggle-39341">
<input type="checkbox" class="fr-toggle__input" id="toggle-39341" aria-describedby="toggle-hint-3936 toggle-39341-messages">
<label class="fr-toggle__label" for="toggle-39341">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3936">Texte de description additionnel</p>
<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-3-toggle-39342">
<input type="checkbox" class="fr-toggle__input" id="toggle-39342" aria-describedby="toggle-hint-3937 toggle-39342-messages">
<label class="fr-toggle__label" for="toggle-39342">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3937">Texte de description additionnel</p>
<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-3-toggle-39343">
<input type="checkbox" class="fr-toggle__input" id="toggle-39343" aria-describedby="toggle-hint-3938 toggle-39343-messages">
<label class="fr-toggle__label" for="toggle-39343">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3938">Texte de description additionnel</p>
<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-3-toggle-39344">
<input type="checkbox" class="fr-toggle__input" id="toggle-39344" aria-describedby="toggle-hint-3939 toggle-39344-messages">
<label class="fr-toggle__label" for="toggle-39344">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3939">Texte de description additionnel</p>
<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-4-toggle-39440">
<input type="checkbox" class="fr-toggle__input" id="toggle-39440" aria-describedby="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>
<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-4-toggle-39441">
<input type="checkbox" class="fr-toggle__input" id="toggle-39441" aria-describedby="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>
<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-4-toggle-39442">
<input type="checkbox" class="fr-toggle__input" id="toggle-39442" aria-describedby="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>
<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-4-toggle-39443">
<input type="checkbox" class="fr-toggle__input" id="toggle-39443" aria-describedby="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>
<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-4-toggle-39444">
<input type="checkbox" class="fr-toggle__input" id="toggle-39444" aria-describedby="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>
<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" id="toggle-group-3953" 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-5-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-5-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-5-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-5-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-5-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">
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--error" 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-6-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-6-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-6-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-6-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-6-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--error" id="toggle-group-3968-message-error">Texte d’erreur obligatoire</p>
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-3983" role="group" aria-labelledby="toggle-group-3983-legend toggle-group-3983-messages">
<legend class="fr-fieldset__legend" id="toggle-group-3983-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-39840">
<input type="checkbox" class="fr-toggle__input" id="toggle-39840" aria-describedby="toggle-hint-3985 toggle-39840-messages">
<label class="fr-toggle__label" for="toggle-39840" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3985">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-39840-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39841">
<input type="checkbox" class="fr-toggle__input" id="toggle-39841" aria-describedby="toggle-hint-3986 toggle-39841-messages">
<label class="fr-toggle__label" for="toggle-39841" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3986">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-39841-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39842">
<input type="checkbox" class="fr-toggle__input" id="toggle-39842" aria-describedby="toggle-hint-3987 toggle-39842-messages">
<label class="fr-toggle__label" for="toggle-39842" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3987">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-39842-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39843">
<input type="checkbox" class="fr-toggle__input" id="toggle-39843" aria-describedby="toggle-hint-3988 toggle-39843-messages">
<label class="fr-toggle__label" for="toggle-39843" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3988">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-39843-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-39844">
<input type="checkbox" class="fr-toggle__input" id="toggle-39844" aria-describedby="toggle-hint-3989 toggle-39844-messages">
<label class="fr-toggle__label" for="toggle-39844" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-3989">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-39844-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-3983-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-group-3983-message-valid">Texte de validation</p>
</div>
</fieldset>