DSFR v1.13.1
Le composant “Interrupteur” permet à l’utilisateur de faire un choix entre deux états opposés (activé / désactivé).
Documentation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4352">
<label class="fr-toggle__label" for="toggle-4352">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4355-hint-text" id="toggle-4355">
<label class="fr-toggle__label" for="toggle-4355">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4355-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-4358">
<label class="fr-toggle__label" for="toggle-4358" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4361-hint-text" id="toggle-4361">
<label class="fr-toggle__label" for="toggle-4361" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4361-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="toggle-4364">
<label class="fr-toggle__label" for="toggle-4364" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4367-hint-text" id="toggle-4367">
<label class="fr-toggle__label" for="toggle-4367" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4367-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-4370">
<label class="fr-toggle__label" for="toggle-4370">Libellé action interrupteur</label>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-4373">
<label class="fr-toggle__label" for="toggle-4373" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled checked id="toggle-4376">
<label class="fr-toggle__label" for="toggle-4376" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-1-toggle-0">
<label class="fr-toggle__label" for="group-1-toggle-0">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-1-toggle-1">
<label class="fr-toggle__label" for="group-1-toggle-1">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-1-toggle-2">
<label class="fr-toggle__label" for="group-1-toggle-2">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-1-toggle-3">
<label class="fr-toggle__label" for="group-1-toggle-3">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-1-toggle-4">
<label class="fr-toggle__label" for="group-1-toggle-4">Libellé action interrupteur</label>
</div>
</li>
</ul>
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-1-toggle-hint-0-hint-text" id="group-1-toggle-hint-0">
<label class="fr-toggle__label" for="group-1-toggle-hint-0">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-0-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-1-toggle-hint-1-hint-text" id="group-1-toggle-hint-1">
<label class="fr-toggle__label" for="group-1-toggle-hint-1">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-1-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-1-toggle-hint-2-hint-text" id="group-1-toggle-hint-2">
<label class="fr-toggle__label" for="group-1-toggle-hint-2">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-2-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-1-toggle-hint-3-hint-text" id="group-1-toggle-hint-3">
<label class="fr-toggle__label" for="group-1-toggle-hint-3">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-3-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-1-toggle-hint-4-hint-text" id="group-1-toggle-hint-4">
<label class="fr-toggle__label" for="group-1-toggle-hint-4">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
</ul>
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-2-toggle-0">
<label class="fr-toggle__label" for="group-2-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-2-toggle-1">
<label class="fr-toggle__label" for="group-2-toggle-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-2-toggle-2">
<label class="fr-toggle__label" for="group-2-toggle-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-2-toggle-3">
<label class="fr-toggle__label" for="group-2-toggle-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" id="group-2-toggle-4">
<label class="fr-toggle__label" for="group-2-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
</li>
</ul>
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
<ul class="fr-toggle__list">
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-2-toggle-hint-0-hint-text" id="group-2-toggle-hint-0">
<label class="fr-toggle__label" for="group-2-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-0-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-2-toggle-hint-1-hint-text" id="group-2-toggle-hint-1">
<label class="fr-toggle__label" for="group-2-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-1-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-2-toggle-hint-2-hint-text" id="group-2-toggle-hint-2">
<label class="fr-toggle__label" for="group-2-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-2-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-2-toggle-hint-3-hint-text" id="group-2-toggle-hint-3">
<label class="fr-toggle__label" for="group-2-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-3-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom">
<input type="checkbox" class="fr-toggle__input" aria-describedby="group-2-toggle-hint-4-hint-text" id="group-2-toggle-hint-4">
<label class="fr-toggle__label" for="group-2-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
</ul>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4383">
<label class="fr-toggle__label" for="toggle-4383">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4386-hint-text" id="toggle-4386">
<label class="fr-toggle__label" for="toggle-4386">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4386-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4389">
<label class="fr-toggle__label" for="toggle-4389" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4392-hint-text" id="toggle-4392">
<label class="fr-toggle__label" for="toggle-4392" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4392-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-4395">
<label class="fr-toggle__label" for="toggle-4395" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
Texte d’aide pour clarifier l’action
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4398-hint-text" id="toggle-4398">
<label class="fr-toggle__label" for="toggle-4398" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="toggle-4398-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-4401">
<label class="fr-toggle__label" for="toggle-4401">Libellé action interrupteur</label>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-4404">
<label class="fr-toggle__label" for="toggle-4404" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>
<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" id="group-3-toggle-0">
<label class="fr-toggle__label" for="group-3-toggle-0">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="group-3-toggle-1">
<label class="fr-toggle__label" for="group-3-toggle-1">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="group-3-toggle-2">
<label class="fr-toggle__label" for="group-3-toggle-2">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="group-3-toggle-3">
<label class="fr-toggle__label" for="group-3-toggle-3">Libellé action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="group-3-toggle-4">
<label class="fr-toggle__label" for="group-3-toggle-4">Libellé action interrupteur</label>
</div>
</li>
</ul>
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
<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-3-toggle-hint-0-hint-text" id="group-3-toggle-hint-0">
<label class="fr-toggle__label" for="group-3-toggle-hint-0">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-0-hint-text">Texte d’aide pour clarifier l’action</p>
</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-3-toggle-hint-1-hint-text" id="group-3-toggle-hint-1">
<label class="fr-toggle__label" for="group-3-toggle-hint-1">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-1-hint-text">Texte d’aide pour clarifier l’action</p>
</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-3-toggle-hint-2-hint-text" id="group-3-toggle-hint-2">
<label class="fr-toggle__label" for="group-3-toggle-hint-2">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-2-hint-text">Texte d’aide pour clarifier l’action</p>
</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-3-toggle-hint-3-hint-text" id="group-3-toggle-hint-3">
<label class="fr-toggle__label" for="group-3-toggle-hint-3">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-3-hint-text">Texte d’aide pour clarifier l’action</p>
</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-3-toggle-hint-4-hint-text" id="group-3-toggle-hint-4">
<label class="fr-toggle__label" for="group-3-toggle-hint-4">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
</ul>
<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" 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é action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" 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é action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" 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é action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" 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é action interrupteur</label>
</div>
</li>
<li>
<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" 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é action interrupteur</label>
</div>
</li>
</ul>
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
Texte d’aide pour clarifier l’action
<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-4-toggle-hint-0-hint-text" id="group-4-toggle-hint-0">
<label class="fr-toggle__label" for="group-4-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-0-hint-text">Texte d’aide pour clarifier l’action</p>
</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-4-toggle-hint-1-hint-text" id="group-4-toggle-hint-1">
<label class="fr-toggle__label" for="group-4-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-1-hint-text">Texte d’aide pour clarifier l’action</p>
</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-4-toggle-hint-2-hint-text" id="group-4-toggle-hint-2">
<label class="fr-toggle__label" for="group-4-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-2-hint-text">Texte d’aide pour clarifier l’action</p>
</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-4-toggle-hint-3-hint-text" id="group-4-toggle-hint-3">
<label class="fr-toggle__label" for="group-4-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-3-hint-text">Texte d’aide pour clarifier l’action</p>
</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-4-toggle-hint-4-hint-text" id="group-4-toggle-hint-4">
<label class="fr-toggle__label" for="group-4-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
</li>
</ul>