DSFR v1.12.0

Retour

Interrupteur (toggle)

Le composant “Interrupteur” permet à l’utilisateur de faire un choix entre deux états opposés (activé / désactivé).

Documentation

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Toggle simple avec bouton + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4731">
    <label class="fr-toggle__label" for="toggle-4731">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à droite + texte d’aide

Texte d’aide pour clarifier l’action

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4734-hint-text" id="toggle-4734">
    <label class="fr-toggle__label" for="toggle-4734">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4734-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4737">
    <label class="fr-toggle__label" for="toggle-4737" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à droite + état + texte d’aide

Texte d’aide pour clarifier l’action

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4740-hint-text" id="toggle-4740">
    <label class="fr-toggle__label" for="toggle-4740" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4740-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + libellé à droite + état + séparateur

<div class="fr-toggle fr-toggle--border-bottom">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4743">
    <label class="fr-toggle__label" for="toggle-4743" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à droite + état + séparateur + texte d’aide

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-4746-hint-text" id="toggle-4746">
    <label class="fr-toggle__label" for="toggle-4746" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4746-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple disabled avec bouton + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled id="toggle-4749">
    <label class="fr-toggle__label" for="toggle-4749">Libellé action interrupteur</label>
</div>

Toggle simple disabled avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled id="toggle-4752">
    <label class="fr-toggle__label" for="toggle-4752" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Toggle simple disabled et pré-coché avec bouton + libellé à droite + état

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled checked id="toggle-4755">
    <label class="fr-toggle__label" for="toggle-4755" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Groupe de toggles simple avec bouton + libellé à droite + séparateur

<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>

Groupe de toggles simple avec bouton + libellé à droite + séparateur + texte d’aide

  • 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>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur

<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>

Groupe de toggles simple avec bouton + libellé à droite + état + séparateur + texte d’aide

  • 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>

Toggle simple avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4762">
    <label class="fr-toggle__label" for="toggle-4762">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à gauche + texte d’aide

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-4765-hint-text" id="toggle-4765">
    <label class="fr-toggle__label" for="toggle-4765">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4765-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + libellé à gauche + état

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4768">
    <label class="fr-toggle__label" for="toggle-4768" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à gauche + état + texte d’aide

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-4771-hint-text" id="toggle-4771">
    <label class="fr-toggle__label" for="toggle-4771" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4771-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + libellé à gauche + état + séparateur

<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4774">
    <label class="fr-toggle__label" for="toggle-4774" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Toggle simple avec bouton + libellé à gauche + état + séparateur + texte d’aide

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-4777-hint-text" id="toggle-4777">
    <label class="fr-toggle__label" for="toggle-4777" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
    <p class="fr-hint-text" id="toggle-4777-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple disabled avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" disabled id="toggle-4780">
    <label class="fr-toggle__label" for="toggle-4780">Libellé action interrupteur</label>
</div>

Toggle simple disabled avec bouton + libellé à gauche + état

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" disabled id="toggle-4783">
    <label class="fr-toggle__label" for="toggle-4783" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé action interrupteur</label>
</div>

Groupe de toggles simple avec bouton + libellé à gauche + séparateur

<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>

Groupe de toggles simple avec bouton + libellé à gauche + séparateur + texte d’aide

  • 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>

Groupe de toggles simple avec bouton + libellé à gauche + état + séparateur

<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>

Groupe de toggles simple avec bouton + libellé à gauche + état + séparateur + texte d’aide

  • 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>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.