Retour

Interrupteur (toggle)

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

Documentation

Toggle simple avec bouton + label à droite

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

Toggle simple avec bouton + label à 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-3654-hint-text" id="toggle-3654">
    <label class="fr-toggle__label" for="toggle-3654">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3654-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + label à droite + état

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

Toggle simple avec bouton + label à 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-3660-hint-text" id="toggle-3660">
    <label class="fr-toggle__label" for="toggle-3660" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3660-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

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

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

Toggle simple avec bouton + label à 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-3666-hint-text" id="toggle-3666">
    <label class="fr-toggle__label" for="toggle-3666" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3666-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple disabled avec bouton + label à droite

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

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

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

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

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

Toggle simple en erreur

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" id="toggle-3678">
    <label class="fr-toggle__label" for="toggle-3678">Label action interrupteur</label>
</div>

Toggle avec état - en erreur

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

Toggle simple valide

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" id="toggle-3684">
    <label class="fr-toggle__label" for="toggle-3684">Label action interrupteur</label>
</div>

Toggle avec état - valide

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

Groupe de toggles simple avec bouton + label à droite

Légende pour l’ensemble des éléments 

<fieldset class="fr-fieldset" id="toggle-group-3690" aria-labelledby="toggle-group-3690-legend toggle-group-3690-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3690-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle">
                    <input type="checkbox" class="fr-toggle__input" 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">
                    <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">
                    <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">
                    <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">
                    <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>
    </div>
    <div class="fr-messages-group" id="toggle-group-3690-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments 

<fieldset class="fr-fieldset" id="toggle-group-3693" aria-labelledby="toggle-group-3693-legend toggle-group-3693-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3693-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" id="group-2-toggle-0">
                    <label class="fr-toggle__label" for="group-2-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-2-toggle-1">
                    <label class="fr-toggle__label" for="group-2-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-2-toggle-2">
                    <label class="fr-toggle__label" for="group-2-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-2-toggle-3">
                    <label class="fr-toggle__label" for="group-2-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-2-toggle-4">
                    <label class="fr-toggle__label" for="group-2-toggle-4">Label action interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3693-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

<fieldset class="fr-fieldset" id="toggle-group-3696" aria-labelledby="toggle-group-3696-legend toggle-group-3696-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3696-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-3-toggle-hint-0-hint-text" 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">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-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">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-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">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-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">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-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">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3696-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments 

<fieldset class="fr-fieldset" id="toggle-group-3699" aria-labelledby="toggle-group-3699-legend toggle-group-3699-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3699-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" 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">
                    <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">
                    <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">
                    <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">
                    <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>
    </div>
    <div class="fr-messages-group" id="toggle-group-3699-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

<fieldset class="fr-fieldset" id="toggle-group-3702" aria-labelledby="toggle-group-3702-legend toggle-group-3702-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3702-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-5-toggle-hint-0-hint-text" id="group-5-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-5-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-5-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-5-toggle-hint-1-hint-text" id="group-5-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-5-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-5-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-5-toggle-hint-2-hint-text" id="group-5-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-5-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-5-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-5-toggle-hint-3-hint-text" id="group-5-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-5-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-5-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-5-toggle-hint-4-hint-text" id="group-5-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-5-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3702-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

Texte d’erreur obligatoire

<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-3705" role="group" aria-labelledby="toggle-group-3705-legend toggle-group-3705-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3705-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-6-toggle-hint-0-hint-text" id="group-6-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-6-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-6-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-6-toggle-hint-1-hint-text" id="group-6-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-6-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-6-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-6-toggle-hint-2-hint-text" id="group-6-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-6-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-6-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-6-toggle-hint-3-hint-text" id="group-6-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-6-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-6-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-6-toggle-hint-4-hint-text" id="group-6-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-6-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3705-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-3705-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

Texte de validation

<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-3708" role="group" aria-labelledby="toggle-group-3708-legend toggle-group-3708-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3708-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-7-toggle-hint-0-hint-text" id="group-7-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-7-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-7-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-7-toggle-hint-1-hint-text" id="group-7-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-7-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-7-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-7-toggle-hint-2-hint-text" id="group-7-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-7-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-7-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-7-toggle-hint-3-hint-text" id="group-7-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-7-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-7-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-7-toggle-hint-4-hint-text" id="group-7-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-7-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3708-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-3708-message-valid">Texte de validation</p>
    </div>
</fieldset>

Toggle simple avec bouton + label à gauche

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

Toggle simple avec bouton + label à 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-3714-hint-text" id="toggle-3714">
    <label class="fr-toggle__label" for="toggle-3714">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3714-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + label à gauche + état

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

Toggle simple avec bouton + label à 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-3720-hint-text" id="toggle-3720">
    <label class="fr-toggle__label" for="toggle-3720" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3720-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple avec bouton + label à 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-3723">
    <label class="fr-toggle__label" for="toggle-3723" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
</div>

Toggle simple avec bouton + label à 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-3726-hint-text" id="toggle-3726">
    <label class="fr-toggle__label" for="toggle-3726" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3726-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

Toggle simple disabled avec bouton + label à gauche

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

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

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

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

Légende pour l’ensemble des éléments 

<fieldset class="fr-fieldset" id="toggle-group-3735" aria-labelledby="toggle-group-3735-legend toggle-group-3735-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3735-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" id="group-8-toggle-0">
                    <label class="fr-toggle__label" for="group-8-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-8-toggle-1">
                    <label class="fr-toggle__label" for="group-8-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-8-toggle-2">
                    <label class="fr-toggle__label" for="group-8-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-8-toggle-3">
                    <label class="fr-toggle__label" for="group-8-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-8-toggle-4">
                    <label class="fr-toggle__label" for="group-8-toggle-4">Label action interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3735-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

<fieldset class="fr-fieldset" id="toggle-group-3738" aria-labelledby="toggle-group-3738-legend toggle-group-3738-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3738-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-9-toggle-hint-0-hint-text" id="group-9-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-0">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-9-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-9-toggle-hint-1-hint-text" id="group-9-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-1">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-9-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-9-toggle-hint-2-hint-text" id="group-9-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-2">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-9-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-9-toggle-hint-3-hint-text" id="group-9-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-3">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-9-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-9-toggle-hint-4-hint-text" id="group-9-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-4">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3738-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments 

<fieldset class="fr-fieldset" id="toggle-group-3741" aria-labelledby="toggle-group-3741-legend toggle-group-3741-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3741-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" id="group-10-toggle-0">
                    <label class="fr-toggle__label" for="group-10-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">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-10-toggle-1">
                    <label class="fr-toggle__label" for="group-10-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-10-toggle-2">
                    <label class="fr-toggle__label" for="group-10-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-10-toggle-3">
                    <label class="fr-toggle__label" for="group-10-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-10-toggle-4">
                    <label class="fr-toggle__label" for="group-10-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3741-messages" aria-live="polite">
    </div>
</fieldset>

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

Légende pour l’ensemble des éléments

  • 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

<fieldset class="fr-fieldset" id="toggle-group-3744" aria-labelledby="toggle-group-3744-legend toggle-group-3744-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3744-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="fr-fieldset__element">
        <ul class="fr-toggle__list">
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="group-11-toggle-hint-0-hint-text" id="group-11-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-11-toggle-hint-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-11-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-11-toggle-hint-1-hint-text" id="group-11-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-11-toggle-hint-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-11-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-11-toggle-hint-2-hint-text" id="group-11-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-11-toggle-hint-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-11-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-11-toggle-hint-3-hint-text" id="group-11-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-11-toggle-hint-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-11-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-11-toggle-hint-4-hint-text" id="group-11-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-11-toggle-hint-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-3744-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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