DSFR v1.13.2
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-4187" aria-describedby="toggle-4187-messages">
<label class="fr-toggle__label" for="toggle-4187">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4187-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4191" aria-describedby="toggle-hint-4192 toggle-4191-messages">
<label class="fr-toggle__label" for="toggle-4191">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4192">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4191-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4195" aria-describedby="toggle-4195-messages">
<label class="fr-toggle__label" for="toggle-4195" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4195-messages" aria-live="polite">
</div>
</div>
Texte de description additionnel
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4199" aria-describedby="toggle-hint-4200 toggle-4199-messages">
<label class="fr-toggle__label" for="toggle-4199" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4200">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4199-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="toggle-4203" aria-describedby="toggle-4203-messages">
<label class="fr-toggle__label" for="toggle-4203" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4203-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-4207" aria-describedby="toggle-hint-4208 toggle-4207-messages">
<label class="fr-toggle__label" for="toggle-4207" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4208">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4207-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4211" disabled aria-describedby="toggle-4211-messages">
<label class="fr-toggle__label" for="toggle-4211">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4211-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4214" disabled aria-describedby="toggle-4214-messages">
<label class="fr-toggle__label" for="toggle-4214" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4214-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4217" disabled checked aria-describedby="toggle-4217-messages">
<label class="fr-toggle__label" for="toggle-4217" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4217-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--error">
<input type="checkbox" class="fr-toggle__input" id="toggle-4220" aria-describedby="toggle-4220-messages">
<label class="fr-toggle__label" for="toggle-4220">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4220-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-4220-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-4223" aria-describedby="toggle-4223-messages">
<label class="fr-toggle__label" for="toggle-4223" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4223-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-4223-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-4226" aria-describedby="toggle-4226-messages">
<label class="fr-toggle__label" for="toggle-4226">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4226-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-4226-message-valid">Texte de validation</p>
</div>
</div>
<div class="fr-toggle fr-toggle--valid">
<input type="checkbox" class="fr-toggle__input" id="toggle-4229" aria-describedby="toggle-4229-messages">
<label class="fr-toggle__label" for="toggle-4229" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4229-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-4229-message-valid">Texte de validation</p>
</div>
</div>
<fieldset class="fr-fieldset" id="toggle-group-4233" aria-labelledby="toggle-group-4233-legend toggle-group-4233-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4233-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-42340">
<input type="checkbox" class="fr-toggle__input" id="toggle-42340" aria-describedby="toggle-42340-messages">
<label class="fr-toggle__label" for="toggle-42340">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42340-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-42341">
<input type="checkbox" class="fr-toggle__input" id="toggle-42341" aria-describedby="toggle-42341-messages">
<label class="fr-toggle__label" for="toggle-42341">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42341-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-42342">
<input type="checkbox" class="fr-toggle__input" id="toggle-42342" aria-describedby="toggle-42342-messages">
<label class="fr-toggle__label" for="toggle-42342">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42342-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-42343">
<input type="checkbox" class="fr-toggle__input" id="toggle-42343" aria-describedby="toggle-42343-messages">
<label class="fr-toggle__label" for="toggle-42343">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42343-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle" id="group-1-toggle-42344">
<input type="checkbox" class="fr-toggle__input" id="toggle-42344" aria-describedby="toggle-42344-messages">
<label class="fr-toggle__label" for="toggle-42344">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42344-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4233-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4238" aria-labelledby="toggle-group-4238-legend toggle-group-4238-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4238-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-42390">
<input type="checkbox" class="fr-toggle__input" id="toggle-42390" aria-describedby="toggle-42390-messages">
<label class="fr-toggle__label" for="toggle-42390">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42390-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42391">
<input type="checkbox" class="fr-toggle__input" id="toggle-42391" aria-describedby="toggle-42391-messages">
<label class="fr-toggle__label" for="toggle-42391">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42391-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42392">
<input type="checkbox" class="fr-toggle__input" id="toggle-42392" aria-describedby="toggle-42392-messages">
<label class="fr-toggle__label" for="toggle-42392">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42392-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42393">
<input type="checkbox" class="fr-toggle__input" id="toggle-42393" aria-describedby="toggle-42393-messages">
<label class="fr-toggle__label" for="toggle-42393">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42393-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-2-toggle-42394">
<input type="checkbox" class="fr-toggle__input" id="toggle-42394" aria-describedby="toggle-42394-messages">
<label class="fr-toggle__label" for="toggle-42394">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42394-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4238-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4248" aria-labelledby="toggle-group-4248-legend toggle-group-4248-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4248-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-42490">
<input type="checkbox" class="fr-toggle__input" id="toggle-42490" aria-describedby="toggle-hint-4250 toggle-42490-messages">
<label class="fr-toggle__label" for="toggle-42490">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4250">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42490-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42491">
<input type="checkbox" class="fr-toggle__input" id="toggle-42491" aria-describedby="toggle-hint-4251 toggle-42491-messages">
<label class="fr-toggle__label" for="toggle-42491">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4251">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42491-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42492">
<input type="checkbox" class="fr-toggle__input" id="toggle-42492" aria-describedby="toggle-hint-4252 toggle-42492-messages">
<label class="fr-toggle__label" for="toggle-42492">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4252">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42492-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42493">
<input type="checkbox" class="fr-toggle__input" id="toggle-42493" aria-describedby="toggle-hint-4253 toggle-42493-messages">
<label class="fr-toggle__label" for="toggle-42493">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4253">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42493-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-3-toggle-42494">
<input type="checkbox" class="fr-toggle__input" id="toggle-42494" aria-describedby="toggle-hint-4254 toggle-42494-messages">
<label class="fr-toggle__label" for="toggle-42494">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4254">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42494-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4248-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4258" aria-labelledby="toggle-group-4258-legend toggle-group-4258-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4258-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-42590">
<input type="checkbox" class="fr-toggle__input" id="toggle-42590" aria-describedby="toggle-42590-messages">
<label class="fr-toggle__label" for="toggle-42590" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42590-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42591">
<input type="checkbox" class="fr-toggle__input" id="toggle-42591" aria-describedby="toggle-42591-messages">
<label class="fr-toggle__label" for="toggle-42591" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42591-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42592">
<input type="checkbox" class="fr-toggle__input" id="toggle-42592" aria-describedby="toggle-42592-messages">
<label class="fr-toggle__label" for="toggle-42592" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42592-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42593">
<input type="checkbox" class="fr-toggle__input" id="toggle-42593" aria-describedby="toggle-42593-messages">
<label class="fr-toggle__label" for="toggle-42593" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42593-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-4-toggle-42594">
<input type="checkbox" class="fr-toggle__input" id="toggle-42594" aria-describedby="toggle-42594-messages">
<label class="fr-toggle__label" for="toggle-42594" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-42594-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4258-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4268" aria-labelledby="toggle-group-4268-legend toggle-group-4268-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4268-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-42690">
<input type="checkbox" class="fr-toggle__input" id="toggle-42690" aria-describedby="toggle-hint-4270 toggle-42690-messages">
<label class="fr-toggle__label" for="toggle-42690" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4270">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42690-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42691">
<input type="checkbox" class="fr-toggle__input" id="toggle-42691" aria-describedby="toggle-hint-4271 toggle-42691-messages">
<label class="fr-toggle__label" for="toggle-42691" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4271">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42691-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42692">
<input type="checkbox" class="fr-toggle__input" id="toggle-42692" aria-describedby="toggle-hint-4272 toggle-42692-messages">
<label class="fr-toggle__label" for="toggle-42692" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4272">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42692-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42693">
<input type="checkbox" class="fr-toggle__input" id="toggle-42693" aria-describedby="toggle-hint-4273 toggle-42693-messages">
<label class="fr-toggle__label" for="toggle-42693" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4273">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42693-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-5-toggle-42694">
<input type="checkbox" class="fr-toggle__input" id="toggle-42694" aria-describedby="toggle-hint-4274 toggle-42694-messages">
<label class="fr-toggle__label" for="toggle-42694" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4274">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42694-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4268-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-4283" role="group" aria-labelledby="toggle-group-4283-legend toggle-group-4283-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4283-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-42840">
<input type="checkbox" class="fr-toggle__input" id="toggle-42840" aria-describedby="toggle-hint-4285 toggle-42840-messages">
<label class="fr-toggle__label" for="toggle-42840" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4285">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42840-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42841">
<input type="checkbox" class="fr-toggle__input" id="toggle-42841" aria-describedby="toggle-hint-4286 toggle-42841-messages">
<label class="fr-toggle__label" for="toggle-42841" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4286">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42841-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42842">
<input type="checkbox" class="fr-toggle__input" id="toggle-42842" aria-describedby="toggle-hint-4287 toggle-42842-messages">
<label class="fr-toggle__label" for="toggle-42842" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4287">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42842-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42843">
<input type="checkbox" class="fr-toggle__input" id="toggle-42843" aria-describedby="toggle-hint-4288 toggle-42843-messages">
<label class="fr-toggle__label" for="toggle-42843" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4288">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42843-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-6-toggle-42844">
<input type="checkbox" class="fr-toggle__input" id="toggle-42844" aria-describedby="toggle-hint-4289 toggle-42844-messages">
<label class="fr-toggle__label" for="toggle-42844" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4289">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42844-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4283-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="toggle-group-4283-message-error">Texte d’erreur obligatoire</p>
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-4298" role="group" aria-labelledby="toggle-group-4298-legend toggle-group-4298-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4298-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-42990">
<input type="checkbox" class="fr-toggle__input" id="toggle-42990" aria-describedby="toggle-hint-4300 toggle-42990-messages">
<label class="fr-toggle__label" for="toggle-42990" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4300">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42990-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42991">
<input type="checkbox" class="fr-toggle__input" id="toggle-42991" aria-describedby="toggle-hint-4301 toggle-42991-messages">
<label class="fr-toggle__label" for="toggle-42991" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4301">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42991-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42992">
<input type="checkbox" class="fr-toggle__input" id="toggle-42992" aria-describedby="toggle-hint-4302 toggle-42992-messages">
<label class="fr-toggle__label" for="toggle-42992" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4302">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42992-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42993">
<input type="checkbox" class="fr-toggle__input" id="toggle-42993" aria-describedby="toggle-hint-4303 toggle-42993-messages">
<label class="fr-toggle__label" for="toggle-42993" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4303">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42993-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom" id="group-7-toggle-42994">
<input type="checkbox" class="fr-toggle__input" id="toggle-42994" aria-describedby="toggle-hint-4304 toggle-42994-messages">
<label class="fr-toggle__label" for="toggle-42994" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4304">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-42994-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4298-messages" aria-live="polite">
<p class="fr-message fr-message--valid" id="toggle-group-4298-message-valid">Texte de validation</p>
</div>
</fieldset>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4307" aria-describedby="toggle-4307-messages">
<label class="fr-toggle__label" for="toggle-4307">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4307-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" id="toggle-4311" aria-describedby="toggle-hint-4312 toggle-4311-messages">
<label class="fr-toggle__label" for="toggle-4311">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4312">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4311-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4315" aria-describedby="toggle-4315-messages">
<label class="fr-toggle__label" for="toggle-4315" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4315-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" id="toggle-4319" aria-describedby="toggle-hint-4320 toggle-4319-messages">
<label class="fr-toggle__label" for="toggle-4319" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4320">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4319-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" id="toggle-4323" aria-describedby="toggle-4323-messages">
<label class="fr-toggle__label" for="toggle-4323" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4323-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" id="toggle-4327" aria-describedby="toggle-hint-4328 toggle-4327-messages">
<label class="fr-toggle__label" for="toggle-4327" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4328">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-4327-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4331" disabled aria-describedby="toggle-4331-messages">
<label class="fr-toggle__label" for="toggle-4331">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4331-messages" aria-live="polite">
</div>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4334" disabled aria-describedby="toggle-4334-messages">
<label class="fr-toggle__label" for="toggle-4334" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-4334-messages" aria-live="polite">
</div>
</div>
<fieldset class="fr-fieldset" id="toggle-group-4338" aria-labelledby="toggle-group-4338-legend toggle-group-4338-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4338-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43390">
<input type="checkbox" class="fr-toggle__input" id="toggle-43390" aria-describedby="toggle-43390-messages">
<label class="fr-toggle__label" for="toggle-43390">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43390-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43391">
<input type="checkbox" class="fr-toggle__input" id="toggle-43391" aria-describedby="toggle-43391-messages">
<label class="fr-toggle__label" for="toggle-43391">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43391-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43392">
<input type="checkbox" class="fr-toggle__input" id="toggle-43392" aria-describedby="toggle-43392-messages">
<label class="fr-toggle__label" for="toggle-43392">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43392-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43393">
<input type="checkbox" class="fr-toggle__input" id="toggle-43393" aria-describedby="toggle-43393-messages">
<label class="fr-toggle__label" for="toggle-43393">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43393-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-8-toggle-43394">
<input type="checkbox" class="fr-toggle__input" id="toggle-43394" aria-describedby="toggle-43394-messages">
<label class="fr-toggle__label" for="toggle-43394">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43394-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4338-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4348" aria-labelledby="toggle-group-4348-legend toggle-group-4348-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4348-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43490">
<input type="checkbox" class="fr-toggle__input" id="toggle-43490" aria-describedby="toggle-hint-4350 toggle-43490-messages">
<label class="fr-toggle__label" for="toggle-43490">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4350">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43490-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43491">
<input type="checkbox" class="fr-toggle__input" id="toggle-43491" aria-describedby="toggle-hint-4351 toggle-43491-messages">
<label class="fr-toggle__label" for="toggle-43491">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4351">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43491-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43492">
<input type="checkbox" class="fr-toggle__input" id="toggle-43492" aria-describedby="toggle-hint-4352 toggle-43492-messages">
<label class="fr-toggle__label" for="toggle-43492">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4352">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43492-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43493">
<input type="checkbox" class="fr-toggle__input" id="toggle-43493" aria-describedby="toggle-hint-4353 toggle-43493-messages">
<label class="fr-toggle__label" for="toggle-43493">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4353">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43493-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-9-toggle-43494">
<input type="checkbox" class="fr-toggle__input" id="toggle-43494" aria-describedby="toggle-hint-4354 toggle-43494-messages">
<label class="fr-toggle__label" for="toggle-43494">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4354">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43494-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4348-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4358" aria-labelledby="toggle-group-4358-legend toggle-group-4358-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4358-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43590">
<input type="checkbox" class="fr-toggle__input" id="toggle-43590" aria-describedby="toggle-43590-messages">
<label class="fr-toggle__label" for="toggle-43590" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43590-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43591">
<input type="checkbox" class="fr-toggle__input" id="toggle-43591" aria-describedby="toggle-43591-messages">
<label class="fr-toggle__label" for="toggle-43591" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43591-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43592">
<input type="checkbox" class="fr-toggle__input" id="toggle-43592" aria-describedby="toggle-43592-messages">
<label class="fr-toggle__label" for="toggle-43592" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43592-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43593">
<input type="checkbox" class="fr-toggle__input" id="toggle-43593" aria-describedby="toggle-43593-messages">
<label class="fr-toggle__label" for="toggle-43593" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43593-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-10-toggle-43594">
<input type="checkbox" class="fr-toggle__input" id="toggle-43594" aria-describedby="toggle-43594-messages">
<label class="fr-toggle__label" for="toggle-43594" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<div class="fr-messages-group" id="toggle-43594-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4358-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="toggle-group-4368" aria-labelledby="toggle-group-4368-legend toggle-group-4368-messages">
<legend class="fr-fieldset__legend" id="toggle-group-4368-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43690">
<input type="checkbox" class="fr-toggle__input" id="toggle-43690" aria-describedby="toggle-hint-4370 toggle-43690-messages">
<label class="fr-toggle__label" for="toggle-43690" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4370">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43690-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43691">
<input type="checkbox" class="fr-toggle__input" id="toggle-43691" aria-describedby="toggle-hint-4371 toggle-43691-messages">
<label class="fr-toggle__label" for="toggle-43691" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4371">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43691-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43692">
<input type="checkbox" class="fr-toggle__input" id="toggle-43692" aria-describedby="toggle-hint-4372 toggle-43692-messages">
<label class="fr-toggle__label" for="toggle-43692" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4372">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43692-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43693">
<input type="checkbox" class="fr-toggle__input" id="toggle-43693" aria-describedby="toggle-hint-4373 toggle-43693-messages">
<label class="fr-toggle__label" for="toggle-43693" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4373">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43693-messages" aria-live="polite">
</div>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left" id="group-11-toggle-43694">
<input type="checkbox" class="fr-toggle__input" id="toggle-43694" aria-describedby="toggle-hint-4374 toggle-43694-messages">
<label class="fr-toggle__label" for="toggle-43694" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
<p class="fr-hint-text" id="toggle-hint-4374">Texte de description additionnel</p>
<div class="fr-messages-group" id="toggle-43694-messages" aria-live="polite">
</div>
</div>
</li>
</ul>
</div>
<div class="fr-messages-group" id="toggle-group-4368-messages" aria-live="polite">
</div>
</fieldset>