Interrupteur - Toggle

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

Interrupteur

L’usage des interrupteurs est à privilégier pour paramétrer des fonctionnalités transverses (exemple : activation / désactivation des cookies) Le changement d'état de l’interrupteur a un effet immédiat (il ne nécessite pas de validation).

Structure

L’interrupteur par défaut se compose des éléments suivants:

  • un bouton permettant de basculer entre les deux états - obligatoire.
  • un label, placé à gauche ou à droite - obligatoire.
  • un texte “état” décrivant l'état de l’interrupteur (activé / désactivé), placé en dessous du bouton”. Il est conseillé de le mettre afin de faciliter la compréhension de l’utilisateur - optionnel.
  • une description, placée en dessous du label - optionnelle.
  • un séparateur horizontal - optionnel.
Exemple d’interrupteurs avec label à droite

Texte d’aide pour clarifier l’action

Texte d’aide pour clarifier l’action

                <div class="fr-toggle">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-698-hint-text" id="toggle-698">
    <label class="fr-toggle__label" for="toggle-698" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-698-hint-text">Texte d’aide pour clarifier l’action</p>
</div>


<!-- Désactivé/inactif --> 
<div class="fr-toggle">
    <input type="checkbox" disabled class="fr-toggle__input" aria-describedby="toggle-699-hint-text" id="toggle-699">
    <label class="fr-toggle__label" for="toggle-699" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-699-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

                
              
Exemple d’interrupteurs avec label à gauche
Il est possible d’afficher le label à droite de l’interrupteur, en utilisant le modificateur fr-toggle--label-left .

Texte d’aide pour clarifier l’action

Texte d’aide pour clarifier l’action

                <div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-726-hint-text" id="toggle-726">
    <label class="fr-toggle__label" for="toggle-726" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-726-hint-text">Texte d’aide pour clarifier l’action</p>
</div>

<!-- Désactivé/inactif -->
<div class="fr-toggle fr-toggle--label-left">
    <input type="checkbox" disabled class="fr-toggle__input" aria-describedby="toggle-727-hint-text" id="toggle-727">
    <label class="fr-toggle__label" for="toggle-727" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
    <p class="fr-hint-text" id="toggle-727-hint-text">Texte d’aide pour clarifier l’action</p>
</div>
                
              
Attention: il faut veiller à ce que le l’interrupteur et son label soient visuellement proche (RGAA)

Groupe d’interrupteurs

L’interrupteur peut également être utilisé en groupe, afin de rassembler une liste d’actions de même nature. Lorsqu’il est utilisé en groupe, l’interrupteur doit respecter le même format. Si le premier interrupteur affiche l'état ou le séparateur optionnel, alors l’ensemble des interrupteurs du groupe devront également afficher ces éléments.

Exemple de groupe d’interrupteurs avec label à droite
  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

                <ul class="fr-toggle__list">
    <li>
        <div class="fr-toggle fr-toggle--border-bottom">
            <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-hint-0-hint-text" id="group-1-toggle-hint-0">
            <label class="fr-toggle__label" for="group-1-toggle-hint-0">Label action interrupteur</label>
            <p class="fr-hint-text" id="toggle-hint-0-hint-text">Texte d’aide pour clarifier l’action</p>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom">
            <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-hint-1-hint-text" id="group-1-toggle-hint-1">
            <label class="fr-toggle__label" for="group-1-toggle-hint-1">Label action interrupteur</label>
            <p class="fr-hint-text" id="toggle-hint-1-hint-text">Texte d’aide pour clarifier l’action</p>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom">
            <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-hint-2-hint-text" id="group-1-toggle-hint-2">
            <label class="fr-toggle__label" for="group-1-toggle-hint-2">Label action interrupteur</label>
            <p class="fr-hint-text" id="toggle-hint-2-hint-text">Texte d’aide pour clarifier l’action</p>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom">
            <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-hint-3-hint-text" id="group-1-toggle-hint-3">
            <label class="fr-toggle__label" for="group-1-toggle-hint-3">Label action interrupteur</label>
            <p class="fr-hint-text" id="toggle-hint-3-hint-text">Texte d’aide pour clarifier l’action</p>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom">
            <input type="checkbox" class="fr-toggle__input" aria-describedby="toggle-hint-4-hint-text" id="group-1-toggle-hint-4">
            <label class="fr-toggle__label" for="group-1-toggle-hint-4">Label action interrupteur</label>
            <p class="fr-hint-text" id="toggle-hint-4-hint-text">Texte d’aide pour clarifier l’action</p>
        </div>
    </li>
</ul>
                
              
Exemple de groupe d’interrupteurs avec label à gauche
                <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-4-toggle-0">
            <label class="fr-toggle__label" for="group-4-toggle-0" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
            <input type="checkbox" class="fr-toggle__input" id="group-4-toggle-1">
            <label class="fr-toggle__label" for="group-4-toggle-1" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
            <input type="checkbox" class="fr-toggle__input" id="group-4-toggle-2">
            <label class="fr-toggle__label" for="group-4-toggle-2" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
            <input type="checkbox" class="fr-toggle__input" id="group-4-toggle-3">
            <label class="fr-toggle__label" for="group-4-toggle-3" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
        </div>
    </li>
    <li>
        <div class="fr-toggle fr-toggle--border-bottom fr-toggle--label-left">
            <input type="checkbox" class="fr-toggle__input" id="group-4-toggle-4">
            <label class="fr-toggle__label" for="group-4-toggle-4" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">Label action interrupteur</label>
        </div>
    </li>
</ul>
                
              

Règles d’utilisation

Usages

  • Si le label seul ne permet pas de comprendre l’action proposée, nous recommandons d’y associer une description
  • L'état inactif de l’interrupteur permet d’afficher un choix déjà effectué et/ou qui ne peut pas être modifié
  • La largeur du composant est définie par son emplacement dans la grille.
  • Dans un groupe d’interrupteurs, toujours conserver la même typologie de composant (avec label à gauche ou à droite, avec ou sans texte d’état).

Accessibilité

  • Le libellé du champ doit être précis, sans ambiguïté et ne doit pas changer en fonction de l'état de l’interrupteur.
  • Dans le cas où une description est associée au label, les attributs aria-describedby et id sont utilisés.

Contenus

  • Il est nécessaire que chaque label d’interrupteur soit clair et concis pour l’utilisateur
  • Un label d’interrupteur doit être concis (ne pas dépasser 3 mots si possible)
  • Lorsque le label n’est pas suffisant pour comprendre l’action requise, il est nécessaire d’utiliser une description pour compléter le label
  • Il est possible d’accompagner ce composant d’un titre pour clarifier le cadre dans lequel il est utilisé.

Personnalisation

Le style de ce composant n’est pas personnalisable. Toutefois, certains éléments sont optionnels - voir la structure du composant.

Besoin d'aide ?

L'équipe du DSFR est là pour vous aider.

Retrouvez-la sur :