Switch
L'interrupteur d'un réglage qui prend effet tout de suite. Switch pose le libellé à gauche et le toggle à droite, SwitchItem donne le toggle seul.
Utilisation
import { Switch, SwitchItem } from "@monstera/ui"Avec libellé
Le libellé prend toute la place disponible et pousse le toggle contre le bord droit : Switch a besoin d'une largeur pour se poser.
États du toggle
SwitchItem est le toggle nu, à étiqueter par aria-label. Le pouce glisse d'un bord à l'autre plutôt que de sauter, et se grise une fois désactivé.
Liste de réglages
Vingt pixels au moins entre deux interrupteurs : la zone de touche fait 44px de haut pour 24px visibles, en dessous elles se chevauchent.
Accessibilité
L'interrupteur expose son état (role="switch", aria-checked) et porte le nom de son libellé, relié par htmlFor. Sans libellé, le type exige aria-label, ou aria-labelledby vers le texte déjà affiché à côté : le nom est posé sur l'interrupteur lui-même, pas sur son conteneur.
API
Switch
Prop
Type
SwitchItem
Prop
Type