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-4044">
    <label class="fr-toggle__label" for="toggle-4044">Label de l'interrupteur</label>
</div>

Toggle simple avec bouton + label à droite + texte d’aide

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4047-hint-text" id="toggle-4047">
    <label class="fr-toggle__label" for="toggle-4047">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4047-hint-text">Texte de description additionnel</p>
</div>

Toggle simple avec bouton + label à droite + état

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

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

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4053-hint-text" id="toggle-4053">
    <label class="fr-toggle__label" for="toggle-4053" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4053-hint-text">Texte de description additionnel</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-4056">
    <label class="fr-toggle__label" for="toggle-4056" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
</div>

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

Texte de description additionnel

<div class="fr-toggle fr-toggle--border-bottom">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4059-hint-text" id="toggle-4059">
    <label class="fr-toggle__label" for="toggle-4059" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4059-hint-text">Texte de description additionnel</p>
</div>

Toggle simple disabled avec bouton + label à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled id="toggle-4062">
    <label class="fr-toggle__label" for="toggle-4062">Label de l'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-4065">
    <label class="fr-toggle__label" for="toggle-4065" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'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-4068">
    <label class="fr-toggle__label" for="toggle-4068" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
</div>

Toggle simple en erreur

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4071">
    <label class="fr-toggle__label" for="toggle-4071">Label de l'interrupteur</label>
</div>

Toggle avec état - en erreur

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

Toggle simple valide

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4077">
    <label class="fr-toggle__label" for="toggle-4077">Label de l'interrupteur</label>
</div>

Toggle avec état - valide

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" id="toggle-4080">
    <label class="fr-toggle__label" for="toggle-4080" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'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-4083" aria-labelledby="toggle-group-4083-legend toggle-group-4083-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4083-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 de l'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 de l'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 de l'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 de l'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 de l'interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4083-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-4086" aria-labelledby="toggle-group-4086-legend toggle-group-4086-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4086-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 de l'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 de l'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 de l'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 de l'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 de l'interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4086-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4089" aria-labelledby="toggle-group-4089-legend toggle-group-4089-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4089-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4089-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-4092" aria-labelledby="toggle-group-4092-legend toggle-group-4092-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4092-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 de l'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 de l'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 de l'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 de l'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 de l'interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4092-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4095" aria-labelledby="toggle-group-4095-legend toggle-group-4095-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4095-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4095-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

Texte d’erreur obligatoire

<fieldset class="fr-fieldset fr-fieldset--error" id="toggle-group-4098" role="group" aria-labelledby="toggle-group-4098-legend toggle-group-4098-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4098-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4098-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-4098-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

Texte de validation

<fieldset class="fr-fieldset fr-fieldset--valid" id="toggle-group-4101" role="group" aria-labelledby="toggle-group-4101-legend toggle-group-4101-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4101-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4101-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-4101-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-4104">
    <label class="fr-toggle__label" for="toggle-4104">Label de l'interrupteur</label>
</div>

Toggle simple avec bouton + label à gauche + texte d’aide

Texte de description additionnel

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4107-hint-text" id="toggle-4107">
    <label class="fr-toggle__label" for="toggle-4107">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4107-hint-text">Texte de description additionnel</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-4110">
    <label class="fr-toggle__label" for="toggle-4110" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
</div>

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

Texte de description additionnel

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4113-hint-text" id="toggle-4113">
    <label class="fr-toggle__label" for="toggle-4113" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4113-hint-text">Texte de description additionnel</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-4116">
    <label class="fr-toggle__label" for="toggle-4116" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
</div>

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

Texte de description additionnel

<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4119-hint-text" id="toggle-4119">
    <label class="fr-toggle__label" for="toggle-4119" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4119-hint-text">Texte de description additionnel</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-4122">
    <label class="fr-toggle__label" for="toggle-4122">Label de l'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-4125">
    <label class="fr-toggle__label" for="toggle-4125" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'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-4128" aria-labelledby="toggle-group-4128-legend toggle-group-4128-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4128-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 de l'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 de l'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 de l'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 de l'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 de l'interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4128-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4131" aria-labelledby="toggle-group-4131-legend toggle-group-4131-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4131-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4131-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-4134" aria-labelledby="toggle-group-4134-legend toggle-group-4134-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4134-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 de l'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 de l'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 de l'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 de l'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 de l'interrupteur</label>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4134-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 de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

  • Texte de description additionnel

<fieldset class="fr-fieldset" id="toggle-group-4137" aria-labelledby="toggle-group-4137-legend toggle-group-4137-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4137-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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-0-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-1-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-2-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-3-hint-text">Texte de description additionnel</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 de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-4-hint-text">Texte de description additionnel</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4137-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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