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-674">
<label class="fr-toggle__label" for="toggle-674">Label 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-677-hint-text" id="toggle-677">
<label class="fr-toggle__label" for="toggle-677">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-677-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" id="toggle-680">
<label class="fr-toggle__label" for="toggle-680" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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-683-hint-text" id="toggle-683">
<label class="fr-toggle__label" for="toggle-683" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-683-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-686">
<label class="fr-toggle__label" for="toggle-686" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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-689-hint-text" id="toggle-689">
<label class="fr-toggle__label" for="toggle-689" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-689-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-692">
<label class="fr-toggle__label" for="toggle-692">Label action interrupteur</label>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-695">
<label class="fr-toggle__label" for="toggle-695" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
</div>
<div class="fr-toggle">
<input type="checkbox" class="fr-toggle__input" disabled checked id="toggle-698">
<label class="fr-toggle__label" for="toggle-698" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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">Label 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">Label 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">Label 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">Label 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">Label action interrupteur</label>
</div>
</li>
</ul>
true
true
true
true
true
<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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-0-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-1-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-2-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-3-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-1-toggle-hint-4-hint-text">true</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é">Label 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é">Label 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é">Label 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é">Label 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é">Label action interrupteur</label>
</div>
</li>
</ul>
true
true
true
true
true
<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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-0-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-1-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-2-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-3-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-2-toggle-hint-4-hint-text">true</p>
</div>
</li>
</ul>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" id="toggle-705">
<label class="fr-toggle__label" for="toggle-705">Label 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-708-hint-text" id="toggle-708">
<label class="fr-toggle__label" for="toggle-708">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-708-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-711">
<label class="fr-toggle__label" for="toggle-711" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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-714-hint-text" id="toggle-714">
<label class="fr-toggle__label" for="toggle-714" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-714-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-717">
<label class="fr-toggle__label" for="toggle-717" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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-720-hint-text" id="toggle-720">
<label class="fr-toggle__label" for="toggle-720" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
<p class="fr-hint-text" id="toggle-720-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-723">
<label class="fr-toggle__label" for="toggle-723">Label action interrupteur</label>
</div>
<div class="fr-toggle fr-toggle--label-left">
<input type="checkbox" class="fr-toggle__input" disabled id="toggle-726">
<label class="fr-toggle__label" for="toggle-726" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label 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">Label 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">Label 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">Label 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">Label 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">Label action interrupteur</label>
</div>
</li>
</ul>
true
true
true
true
true
<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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-0-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-1-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-2-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-3-hint-text">true</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">Label action interrupteur</label>
<p class="fr-hint-text" id="group-3-toggle-hint-4-hint-text">true</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é">Label 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é">Label 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é">Label 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é">Label 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é">Label action interrupteur</label>
</div>
</li>
</ul>
true
true
true
true
true
<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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-0-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-1-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-2-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-3-hint-text">true</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é">Label action interrupteur</label>
<p class="fr-hint-text" id="group-4-toggle-hint-4-hint-text">true</p>
</div>
</li>
</ul>