DSFR v1.12.0
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" aria-describedby="toggle-4633-messages" id="toggle-4633">
<label class="fr-toggle__label" for="toggle-4633">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4633-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4636-hint-text toggle-4636-messages" id="toggle-4636">
<label class="fr-toggle__label" for="toggle-4636">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4636-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4636-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4639-messages" id="toggle-4639">
<label class="fr-toggle__label" for="toggle-4639" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4639-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4642-hint-text toggle-4642-messages" id="toggle-4642">
<label class="fr-toggle__label" for="toggle-4642" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4642-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4642-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4645-messages" id="toggle-4645">
<label class="fr-toggle__label" for="toggle-4645" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4645-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" aria-describedby="toggle-4648-hint-text toggle-4648-messages" id="toggle-4648">
<label class="fr-toggle__label" for="toggle-4648" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4648-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4648-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4651-messages" id="toggle-4651">
<label class="fr-toggle__label" for="toggle-4651">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4651-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4654-messages" id="toggle-4654">
<label class="fr-toggle__label" for="toggle-4654" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4654-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled checked aria-describedby="toggle-4657-messages" id="toggle-4657">
<label class="fr-toggle__label" for="toggle-4657" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4657-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--error">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4660-messages" id="toggle-4660">
<label class="fr-toggle__label" for="toggle-4660">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4660-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-4660-message-error">Texte d’erreur obligatoire</p>
</div>
</div>
<div class="fr-toggle fr-toggle--error">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4663-messages" id="toggle-4663">
<label class="fr-toggle__label" for="toggle-4663" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4663-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-4663-message-error">Texte d’erreur obligatoire</p>
</div>
</div>
<div class="fr-toggle fr-toggle--valid">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4666-messages" id="toggle-4666">
<label class="fr-toggle__label" for="toggle-4666">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4666-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-4666-message-valid">Texte de validation</p>
</div>
</div>
<div class="fr-toggle fr-toggle--valid">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4669-messages" id="toggle-4669">
<label class="fr-toggle__label" for="toggle-4669" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4669-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-4669-message-valid">Texte de validation</p>
</div>
</div>
<fieldset class="fr-fieldset" id="toggle-group-4672" aria-labelledby="toggle-group-4672-legend toggle-group-4672-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4672-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-0-messages" id="group-1-toggle-0">
<label class="fr-toggle__label" for="group-1-toggle-0">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-1-toggle-1">
<label class="fr-toggle__label" for="group-1-toggle-1">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-1-toggle-2">
<label class="fr-toggle__label" for="group-1-toggle-2">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-1-toggle-3">
<label class="fr-toggle__label" for="group-1-toggle-3">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-1-toggle-4">
<label class="fr-toggle__label" for="group-1-toggle-4">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4672-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4675" aria-labelledby="toggle-group-4675-legend toggle-group-4675-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4675-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-0-messages" id="group-2-toggle-0">
<label class="fr-toggle__label" for="group-2-toggle-0">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-2-toggle-1">
<label class="fr-toggle__label" for="group-2-toggle-1">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-2-toggle-2">
<label class="fr-toggle__label" for="group-2-toggle-2">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-2-toggle-3">
<label class="fr-toggle__label" for="group-2-toggle-3">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-2-toggle-4">
<label class="fr-toggle__label" for="group-2-toggle-4">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4675-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4678" aria-labelledby="toggle-group-4678-legend toggle-group-4678-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4678-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-3-toggle-hint-0">
<label class="fr-toggle__label" for="group-3-toggle-hint-0">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-3-toggle-hint-1">
<label class="fr-toggle__label" for="group-3-toggle-hint-1">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-3-toggle-hint-2">
<label class="fr-toggle__label" for="group-3-toggle-hint-2">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-3-toggle-hint-3">
<label class="fr-toggle__label" for="group-3-toggle-hint-3">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-3-toggle-hint-4">
<label class="fr-toggle__label" for="group-3-toggle-hint-4">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4678-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4681" aria-labelledby="toggle-group-4681-legend toggle-group-4681-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4681-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-0-messages" id="group-4-toggle-0">
<label class="fr-toggle__label" for="group-4-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-4-toggle-1">
<label class="fr-toggle__label" for="group-4-toggle-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-4-toggle-2">
<label class="fr-toggle__label" for="group-4-toggle-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-4-toggle-3">
<label class="fr-toggle__label" for="group-4-toggle-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-4-toggle-4">
<label class="fr-toggle__label" for="group-4-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4681-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4684" aria-labelledby="toggle-group-4684-legend toggle-group-4684-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4684-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-5-toggle-hint-0">
<label class="fr-toggle__label" for="group-5-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-5-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-5-toggle-hint-1">
<label class="fr-toggle__label" for="group-5-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-5-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-5-toggle-hint-2">
<label class="fr-toggle__label" for="group-5-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-5-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-5-toggle-hint-3">
<label class="fr-toggle__label" for="group-5-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-5-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-5-toggle-hint-4">
<label class="fr-toggle__label" for="group-5-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-5-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4684-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-4687" role="group" aria-labelledby="toggle-group-4687-legend toggle-group-4687-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4687-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-6-toggle-hint-0">
<label class="fr-toggle__label" for="group-6-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-6-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-6-toggle-hint-1">
<label class="fr-toggle__label" for="group-6-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-6-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-6-toggle-hint-2">
<label class="fr-toggle__label" for="group-6-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-6-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-6-toggle-hint-3">
<label class="fr-toggle__label" for="group-6-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-6-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-6-toggle-hint-4">
<label class="fr-toggle__label" for="group-6-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-6-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4687-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-group-4687-message-error">Texte d’erreur obligatoire</p>
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-4690" role="group" aria-labelledby="toggle-group-4690-legend toggle-group-4690-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4690-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-7-toggle-hint-0">
<label class="fr-toggle__label" for="group-7-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-7-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-7-toggle-hint-1">
<label class="fr-toggle__label" for="group-7-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-7-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-7-toggle-hint-2">
<label class="fr-toggle__label" for="group-7-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-7-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-7-toggle-hint-3">
<label class="fr-toggle__label" for="group-7-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-7-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-7-toggle-hint-4">
<label class="fr-toggle__label" for="group-7-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-7-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4690-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-group-4690-message-valid">Texte de validation</p>
</div>
</fieldset>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4693-messages" id="toggle-4693">
<label class="fr-toggle__label" for="toggle-4693">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4693-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4696-hint-text toggle-4696-messages" id="toggle-4696">
<label class="fr-toggle__label" for="toggle-4696">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4696-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4696-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4699-messages" id="toggle-4699">
<label class="fr-toggle__label" for="toggle-4699" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4699-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4702-hint-text toggle-4702-messages" id="toggle-4702">
<label class="fr-toggle__label" for="toggle-4702" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4702-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4702-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4705-messages" id="toggle-4705">
<label class="fr-toggle__label" for="toggle-4705" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4705-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4708-hint-text toggle-4708-messages" id="toggle-4708">
<label class="fr-toggle__label" for="toggle-4708" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-4708-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4708-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4711-messages" id="toggle-4711">
<label class="fr-toggle__label" for="toggle-4711">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4711-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4714-messages" id="toggle-4714">
<label class="fr-toggle__label" for="toggle-4714" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4714-messages" aria-live="polite">
</div>
</div>
<fieldset class="fr-fieldset" id="toggle-group-4717" aria-labelledby="toggle-group-4717-legend toggle-group-4717-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4717-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-0-messages" id="group-8-toggle-0">
<label class="fr-toggle__label" for="group-8-toggle-0">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-8-toggle-1">
<label class="fr-toggle__label" for="group-8-toggle-1">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-8-toggle-2">
<label class="fr-toggle__label" for="group-8-toggle-2">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-8-toggle-3">
<label class="fr-toggle__label" for="group-8-toggle-3">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-8-toggle-4">
<label class="fr-toggle__label" for="group-8-toggle-4">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4717-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4720" aria-labelledby="toggle-group-4720-legend toggle-group-4720-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4720-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-9-toggle-hint-0">
<label class="fr-toggle__label" for="group-9-toggle-hint-0">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-9-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-9-toggle-hint-1">
<label class="fr-toggle__label" for="group-9-toggle-hint-1">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-9-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-9-toggle-hint-2">
<label class="fr-toggle__label" for="group-9-toggle-hint-2">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-9-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-9-toggle-hint-3">
<label class="fr-toggle__label" for="group-9-toggle-hint-3">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-9-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-9-toggle-hint-4">
<label class="fr-toggle__label" for="group-9-toggle-hint-4">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-9-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4720-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4723" aria-labelledby="toggle-group-4723-legend toggle-group-4723-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4723-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-0-messages" id="group-10-toggle-0">
<label class="fr-toggle__label" for="group-10-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-10-toggle-1">
<label class="fr-toggle__label" for="group-10-toggle-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-10-toggle-2">
<label class="fr-toggle__label" for="group-10-toggle-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-10-toggle-3">
<label class="fr-toggle__label" for="group-10-toggle-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-10-toggle-4">
<label class="fr-toggle__label" for="group-10-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4723-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4726" aria-labelledby="toggle-group-4726-legend toggle-group-4726-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4726-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">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-0-hint-text toggle-hint-0-messages" id="group-11-toggle-hint-0">
<label class="fr-toggle__label" for="group-11-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-11-toggle-hint-0-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-1-hint-text toggle-hint-1-messages" id="group-11-toggle-hint-1">
<label class="fr-toggle__label" for="group-11-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-11-toggle-hint-1-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-2-hint-text toggle-hint-2-messages" id="group-11-toggle-hint-2">
<label class="fr-toggle__label" for="group-11-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-11-toggle-hint-2-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-3-hint-text toggle-hint-3-messages" id="group-11-toggle-hint-3">
<label class="fr-toggle__label" for="group-11-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-11-toggle-hint-3-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-4-hint-text toggle-hint-4-messages" id="group-11-toggle-hint-4">
<label class="fr-toggle__label" for="group-11-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="group-11-toggle-hint-4-hint-text">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4726-messages" aria-live="polite">
</div>
</fieldset>