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-3631">
    <label class="fr-toggle__label" for="toggle-3631">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-3634-hint-text" id="toggle-3634">
    <label class="fr-toggle__label" for="toggle-3634">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3634-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-3637">
    <label class="fr-toggle__label" for="toggle-3637" 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-3640-hint-text" id="toggle-3640">
    <label class="fr-toggle__label" for="toggle-3640" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3640-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-3643">
    <label class="fr-toggle__label" for="toggle-3643" 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-3646-hint-text" id="toggle-3646">
    <label class="fr-toggle__label" for="toggle-3646" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3646-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-3649">
    <label class="fr-toggle__label" for="toggle-3649">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-3652">
    <label class="fr-toggle__label" for="toggle-3652" 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-3655">
    <label class="fr-toggle__label" for="toggle-3655" 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-3658">
    <label class="fr-toggle__label" for="toggle-3658">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-3661">
    <label class="fr-toggle__label" for="toggle-3661" 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-3664">
    <label class="fr-toggle__label" for="toggle-3664">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-3667">
    <label class="fr-toggle__label" for="toggle-3667" 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-3670" aria-labelledby="toggle-group-3670-legend toggle-group-3670-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3670-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-3670-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-3673" aria-labelledby="toggle-group-3673-legend toggle-group-3673-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3673-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-3673-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-3676" aria-labelledby="toggle-group-3676-legend toggle-group-3676-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3676-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-3676-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-3679" aria-labelledby="toggle-group-3679-legend toggle-group-3679-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3679-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-3679-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-3682" aria-labelledby="toggle-group-3682-legend toggle-group-3682-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3682-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-3682-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-3685" role="group" aria-labelledby="toggle-group-3685-legend toggle-group-3685-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3685-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-3685-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-3685-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-3688" role="group" aria-labelledby="toggle-group-3688-legend toggle-group-3688-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3688-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-3688-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-3688-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-3691">
    <label class="fr-toggle__label" for="toggle-3691">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-3694-hint-text" id="toggle-3694">
    <label class="fr-toggle__label" for="toggle-3694">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3694-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-3697">
    <label class="fr-toggle__label" for="toggle-3697" 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-3700-hint-text" id="toggle-3700">
    <label class="fr-toggle__label" for="toggle-3700" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3700-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-3703">
    <label class="fr-toggle__label" for="toggle-3703" 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-3706-hint-text" id="toggle-3706">
    <label class="fr-toggle__label" for="toggle-3706" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-3706-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-3709">
    <label class="fr-toggle__label" for="toggle-3709">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-3712">
    <label class="fr-toggle__label" for="toggle-3712" 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-3715" aria-labelledby="toggle-group-3715-legend toggle-group-3715-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3715-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-3715-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-3718" aria-labelledby="toggle-group-3718-legend toggle-group-3718-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3718-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-3718-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-3721" aria-labelledby="toggle-group-3721-legend toggle-group-3721-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3721-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-3721-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-3724" aria-labelledby="toggle-group-3724-legend toggle-group-3724-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-3724-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-3724-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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