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).

Exemple d'utilisation

Utilisation de l'event et du border

Etat de l'interrupteur : {{ toggleChecked ? "Activé" : "Désactivé" }}

Utilisation du label à gauche

Utilisation des ids

Utilisation du disabled

Utilisation du composant sans description

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 ( disabled = true ) 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, l'attribut aria-describedby est utilisé automatiquement, sinon il n'apparait pas.

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é.