Formulaires

Interrupteur

مفتاح تبديلSwitch

Stablesrc/dsm/components/switch.tsx
Bascule immédiate d'un réglage entre deux états (activé/désactivé). Contrairement à une case à cocher, l'interrupteur suggère un effet instantané plutôt qu'une sélection à valider avec le reste d'un formulaire.

Import

import { Switch } from "@/dsm/components/switch";

Exemples

Simple

Interrupteurs avec libellé et aide, coché et non coché.

LTR

Tailles

Les deux tailles disponibles : sm et md.

LTR

Position du libellé

Libellé avant ou après le rail, utile dans une liste de réglages.

LTR

Usage

Quand l'utiliser

  • Utilisez `Switch` pour un réglage qui prend effet immédiatement, sans bouton de validation (notifications, mode sombre, visibilité d'une information).
  • Placez le libellé après l'interrupteur (`labelPosition="end"`, par défaut) dans une liste de réglages alignés à gauche.
  • Utilisez `labelPosition="start"` dans une ligne de tableau ou une carte où le libellé doit rester collé au bord de début.

Quand ne pas l'utiliser

  • N'utilisez pas `Switch` dans un formulaire classique validé par un bouton « Envoyer » : une case à cocher (`Checkbox`) est plus cohérente avec ce modèle.
  • N'utilisez pas `Switch` pour un choix parmi plus de deux options.

Accessibilité & langues

Accessibilité

  • Le libellé enveloppe l'interrupteur : toute la ligne est cliquable, pas seulement le petit rail.
  • L'état est exposé nativement (rôle switch), annoncé « activé »/« désactivé » par les lecteurs d'écran.

RTL & multilingue

  • Le curseur glisse avec `translate-x` combiné à `rtl:-translate-x`, ce qui inverse correctement le sens du mouvement en arabe.

Propriétés

Switch
PropriétéTypeDéfautDescription
labelReactNode—Libellé affiché à côté du rail.
hintReactNode—Texte secondaire sous le libellé.
size"sm" | "md"mdTaille du rail et du curseur.
labelPosition"start" | "end"endPosition du libellé par rapport au rail.
checked / defaultChecked / onCheckedChangeboolean—Contrôle ou observe l'état activé.

Composants liés