DSFR v1.12.1

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 + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4633-messages" id="toggle-4633">
    <label class="fr-toggle__label" for="toggle-4633">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4633-messages" aria-live="polite">
    </div>
</div>

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

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4636-hint-text toggle-4636-messages" id="toggle-4636">
    <label class="fr-toggle__label" for="toggle-4636">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4636-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4636-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4639-messages" id="toggle-4639">
    <label class="fr-toggle__label" for="toggle-4639" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4639-messages" aria-live="polite">
    </div>
</div>

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

Texte de description additionnel

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4642-hint-text toggle-4642-messages" id="toggle-4642">
    <label class="fr-toggle__label" for="toggle-4642" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4642-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4642-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle fr-toggle--border-bottom">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4645-messages" id="toggle-4645">
    <label class="fr-toggle__label" for="toggle-4645" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4645-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à 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-4648-hint-text toggle-4648-messages" id="toggle-4648">
    <label class="fr-toggle__label" for="toggle-4648" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4648-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4648-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à droite

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4651-messages" id="toggle-4651">
    <label class="fr-toggle__label" for="toggle-4651">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4651-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4654-messages" id="toggle-4654">
    <label class="fr-toggle__label" for="toggle-4654" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4654-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" disabled checked aria-describedby="toggle-4657-messages" id="toggle-4657">
    <label class="fr-toggle__label" for="toggle-4657" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4657-messages" aria-live="polite">
    </div>
</div>

Toggle simple en erreur

Texte d’erreur obligatoire

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4660-messages" id="toggle-4660">
    <label class="fr-toggle__label" for="toggle-4660">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4660-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4660-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

Toggle avec état - en erreur

Texte d’erreur obligatoire

<div class="fr-toggle fr-toggle--error">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4663-messages" id="toggle-4663">
    <label class="fr-toggle__label" for="toggle-4663" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4663-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-4663-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

Toggle simple valide

Texte de validation

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4666-messages" id="toggle-4666">
    <label class="fr-toggle__label" for="toggle-4666">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4666-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4666-message-valid">Texte de validation</p>
    </div>
</div>

Toggle avec état - valide

Texte de validation

<div class="fr-toggle fr-toggle--valid">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4669-messages" id="toggle-4669">
    <label class="fr-toggle__label" for="toggle-4669" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4669-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-4669-message-valid">Texte de validation</p>
    </div>
</div>

Groupe de toggles simple avec bouton + libellé à droite

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

<fieldset class="fr-fieldset" id="toggle-group-4672" aria-labelledby="toggle-group-4672-legend toggle-group-4672-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4672-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" aria-describedby="toggle-0-messages" id="group-1-toggle-0">
                    <label class="fr-toggle__label" for="group-1-toggle-0">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-1-toggle-1">
                    <label class="fr-toggle__label" for="group-1-toggle-1">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-1-toggle-2">
                    <label class="fr-toggle__label" for="group-1-toggle-2">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-1-toggle-3">
                    <label class="fr-toggle__label" for="group-1-toggle-3">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-1-toggle-4">
                    <label class="fr-toggle__label" for="group-1-toggle-4">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4672-messages" aria-live="polite">
    </div>
</fieldset>

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

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

<fieldset class="fr-fieldset" id="toggle-group-4675" aria-labelledby="toggle-group-4675-legend toggle-group-4675-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4675-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="toggle-0-messages" id="group-2-toggle-0">
                    <label class="fr-toggle__label" for="group-2-toggle-0">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-2-toggle-1">
                    <label class="fr-toggle__label" for="group-2-toggle-1">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-2-toggle-2">
                    <label class="fr-toggle__label" for="group-2-toggle-2">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-2-toggle-3">
                    <label class="fr-toggle__label" for="group-2-toggle-3">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-2-toggle-4">
                    <label class="fr-toggle__label" for="group-2-toggle-4">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4675-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4678" aria-labelledby="toggle-group-4678-legend toggle-group-4678-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4678-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 toggle-hint-0-messages" id="group-3-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-3-toggle-hint-0">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" id="group-3-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-3-toggle-hint-1">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" id="group-3-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-3-toggle-hint-2">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" id="group-3-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-3-toggle-hint-3">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" id="group-3-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-3-toggle-hint-4">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-3-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4678-messages" aria-live="polite">
    </div>
</fieldset>

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

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

<fieldset class="fr-fieldset" id="toggle-group-4681" aria-labelledby="toggle-group-4681-legend toggle-group-4681-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4681-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="toggle-0-messages" id="group-4-toggle-0">
                    <label class="fr-toggle__label" for="group-4-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-4-toggle-1">
                    <label class="fr-toggle__label" for="group-4-toggle-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-4-toggle-2">
                    <label class="fr-toggle__label" for="group-4-toggle-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-4-toggle-3">
                    <label class="fr-toggle__label" for="group-4-toggle-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-4-toggle-4">
                    <label class="fr-toggle__label" for="group-4-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4681-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4684" aria-labelledby="toggle-group-4684-legend toggle-group-4684-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4684-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 toggle-hint-0-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-5-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4684-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4687" role="group" aria-labelledby="toggle-group-4687-legend toggle-group-4687-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4687-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 toggle-hint-0-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-6-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4687-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="toggle-group-4687-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4690" role="group" aria-labelledby="toggle-group-4690-legend toggle-group-4690-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4690-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 toggle-hint-0-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-7-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4690-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="toggle-group-4690-message-valid">Texte de validation</p>
    </div>
</fieldset>

Toggle simple avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4693-messages" id="toggle-4693">
    <label class="fr-toggle__label" for="toggle-4693">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4693-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à 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-4696-hint-text toggle-4696-messages" id="toggle-4696">
    <label class="fr-toggle__label" for="toggle-4696">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4696-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4696-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4699-messages" id="toggle-4699">
    <label class="fr-toggle__label" for="toggle-4699" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4699-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à 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-4702-hint-text toggle-4702-messages" id="toggle-4702">
    <label class="fr-toggle__label" for="toggle-4702" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4702-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4702-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4705-messages" id="toggle-4705">
    <label class="fr-toggle__label" for="toggle-4705" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4705-messages" aria-live="polite">
    </div>
</div>

Toggle simple avec bouton + libellé à 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-4708-hint-text toggle-4708-messages" id="toggle-4708">
    <label class="fr-toggle__label" for="toggle-4708" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <p class="fr-hint-text" id="toggle-4708-hint-text">Texte de description additionnel</p>
    <div class="fr-messages-group" id="toggle-4708-messages" aria-live="polite">
    </div>
</div>

Toggle simple disabled avec bouton + libellé à gauche

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4711-messages" id="toggle-4711">
    <label class="fr-toggle__label" for="toggle-4711">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4711-messages" aria-live="polite">
    </div>
</div>

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

<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" disabled aria-describedby="toggle-4714-messages" id="toggle-4714">
    <label class="fr-toggle__label" for="toggle-4714" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Libellé de l'interrupteur</label>
    <div class="fr-messages-group" id="toggle-4714-messages" aria-live="polite">
    </div>
</div>

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

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

<fieldset class="fr-fieldset" id="toggle-group-4717" aria-labelledby="toggle-group-4717-legend toggle-group-4717-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4717-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="toggle-0-messages" id="group-8-toggle-0">
                    <label class="fr-toggle__label" for="group-8-toggle-0">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" id="group-8-toggle-1">
                    <label class="fr-toggle__label" for="group-8-toggle-1">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" id="group-8-toggle-2">
                    <label class="fr-toggle__label" for="group-8-toggle-2">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" id="group-8-toggle-3">
                    <label class="fr-toggle__label" for="group-8-toggle-3">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" id="group-8-toggle-4">
                    <label class="fr-toggle__label" for="group-8-toggle-4">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4717-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4720" aria-labelledby="toggle-group-4720-legend toggle-group-4720-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4720-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 toggle-hint-0-messages" id="group-9-toggle-hint-0">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-0">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" id="group-9-toggle-hint-1">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-1">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" id="group-9-toggle-hint-2">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-2">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" id="group-9-toggle-hint-3">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-3">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" id="group-9-toggle-hint-4">
                    <label class="fr-toggle__label" for="group-9-toggle-hint-4">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-9-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4720-messages" aria-live="polite">
    </div>
</fieldset>

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

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

<fieldset class="fr-fieldset" id="toggle-group-4723" aria-labelledby="toggle-group-4723-legend toggle-group-4723-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4723-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="toggle-0-messages" 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é">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-0-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-1-messages" 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é">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-1-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-2-messages" 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é">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-2-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-3-messages" 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é">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-3-messages" aria-live="polite">
                    </div>
                </div>
            </li>
            <li>
                <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
                    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-4-messages" 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é">Libellé de l'interrupteur</label>
                    <div class="fr-messages-group" id="toggle-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4723-messages" aria-live="polite">
    </div>
</fieldset>

Groupe de toggles simple avec bouton + libellé à 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-4726" aria-labelledby="toggle-group-4726-legend toggle-group-4726-messages">
    <legend class="fr-fieldset__legend" id="toggle-group-4726-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 toggle-hint-0-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-0-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-0-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-1-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-1-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-1-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-2-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-2-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-2-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-3-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-3-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-3-messages" aria-live="polite">
                    </div>
                </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 toggle-hint-4-messages" 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é">Libellé de l'interrupteur</label>
                    <p class="fr-hint-text" id="group-11-toggle-hint-4-hint-text">Texte de description additionnel</p>
                    <div class="fr-messages-group" id="toggle-hint-4-messages" aria-live="polite">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="fr-messages-group" id="toggle-group-4726-messages" aria-live="polite">
    </div>
</fieldset>

Autres versions

Paramètres d’affichage

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