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-4402">
    <label class="fr-toggle__label" for="toggle-4402">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-4405-hint-text" id="toggle-4405">
    <label class="fr-toggle__label" for="toggle-4405">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4405-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-4408">
    <label class="fr-toggle__label" for="toggle-4408" 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-4411-hint-text" id="toggle-4411">
    <label class="fr-toggle__label" for="toggle-4411" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4411-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-4414">
    <label class="fr-toggle__label" for="toggle-4414" 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-4417-hint-text" id="toggle-4417">
    <label class="fr-toggle__label" for="toggle-4417" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4417-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-4420">
    <label class="fr-toggle__label" for="toggle-4420">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-4423">
    <label class="fr-toggle__label" for="toggle-4423" 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-4426">
    <label class="fr-toggle__label" for="toggle-4426" 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-4429">
    <label class="fr-toggle__label" for="toggle-4429">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-4432">
    <label class="fr-toggle__label" for="toggle-4432" 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-4435">
    <label class="fr-toggle__label" for="toggle-4435">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-4438">
    <label class="fr-toggle__label" for="toggle-4438" 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-4441" aria-labelledby="toggle-group-4441-legend toggle-group-4441-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4441-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-4441-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-4444" aria-labelledby="toggle-group-4444-legend toggle-group-4444-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4444-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-4444-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-4447" aria-labelledby="toggle-group-4447-legend toggle-group-4447-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4447-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-4447-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-4450" aria-labelledby="toggle-group-4450-legend toggle-group-4450-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4450-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-4450-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-4453" aria-labelledby="toggle-group-4453-legend toggle-group-4453-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4453-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-4453-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-4456" role="group" aria-labelledby="toggle-group-4456-legend toggle-group-4456-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4456-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-4456-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-4456-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-4459" role="group" aria-labelledby="toggle-group-4459-legend toggle-group-4459-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4459-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-4459-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-4459-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-4462">
    <label class="fr-toggle__label" for="toggle-4462">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-4465-hint-text" id="toggle-4465">
    <label class="fr-toggle__label" for="toggle-4465">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4465-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-4468">
    <label class="fr-toggle__label" for="toggle-4468" 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-4471-hint-text" id="toggle-4471">
    <label class="fr-toggle__label" for="toggle-4471" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4471-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-4474">
    <label class="fr-toggle__label" for="toggle-4474" 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-4477-hint-text" id="toggle-4477">
    <label class="fr-toggle__label" for="toggle-4477" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4477-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-4480">
    <label class="fr-toggle__label" for="toggle-4480">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-4483">
    <label class="fr-toggle__label" for="toggle-4483" 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-4486" aria-labelledby="toggle-group-4486-legend toggle-group-4486-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4486-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-4486-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-4489" aria-labelledby="toggle-group-4489-legend toggle-group-4489-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4489-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-4489-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-4492" aria-labelledby="toggle-group-4492-legend toggle-group-4492-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4492-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-4492-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-4495" aria-labelledby="toggle-group-4495-legend toggle-group-4495-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4495-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-4495-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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