Composant · Formulaire

Switch

Stable

Interrupteur on/off pour un réglage appliqué immédiatement. Case <input type="checkbox" role="switch"> avec piste et pastille, libellé à droite et texte d'aide optionnel.

Quand l'utiliser

Activer/désactiver un réglage qui prend effet immédiatement (sans Enregistrer).
Pour un choix validé plus tard avec le formulaire, préférez Checkbox.
Switch (avec label intégré à droite) vs Toggle (avec libellé d'état On/Off) selon le besoin.

États

Désactivé / activé (off / on)

Notifications Notifications

Avec texte d'aide

Mode sombre S'applique immédiatement à toute l'interface.

Désactivé (non interactif)

Verrouillé Verrouillé (on)

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Désactivé / activé (off / on)</h3>
  <Switch label="Notifications" />
  <Switch label="Notifications" checked />
  <h3>Avec texte d'aide</h3>
  <Switch
    label="Mode sombre"
    helperText="S'applique immédiatement à toute l'interface."
  />
  <h3>Désactivé (non interactif)</h3>
  <Switch label="Verrouillé" disabled />
  <Switch label="Verrouillé (on)" checked disabled />
</div>

Anatomie

Élément racine : un <label> englobant (classe st-switch).
Piste (.st-switch__track) + pastille (.st-switch__thumb), purement visuelles (aria-hidden).
Input natif <checkbox role="switch"> superposé, qui porte l'état et le focus.
Contenu : libellé (requis) + texte d'aide optionnel.

Accessibilité

L'input expose role="switch" et aria-checked reflète l'état.
Focusable au clavier, basculé avec Espace ; le focus est visible sur la piste.
Piste et pastille sont aria-hidden : l'état est porté par l'input natif.

Lignes directrices

À faire

Réserver Switch aux réglages instantanés.
Libellé décrivant ce qui est activé, pas l'état.

À éviter

Mettre un Switch dans un formulaire validé par bouton : Checkbox.
Demander une confirmation après chaque bascule.

API

Prop	Type	Défaut	Description
`label`	`string`	requis	Libellé visible à droite.
`helperText`	`string`	optionnel	Texte d'aide sous le libellé.
`checked`	`boolean`	`false`	État on/off (attribut natif).
`class`	`string`	optionnel	Classe(s) sur le <label>.
Autres attributs	`HTMLInputAttributes`	N/A	Propagés sur l'<input> (disabled, name, onchange…).

Note : Switch lit checked en attribut natif (non bindable). Pour un état piloté avec bind:checked et une taille sm/md, utilisez le composant Toggle.

Tokens utilisés

--st-component-selection-switchTrack
--st-component-selection-switchTrackChecked
--st-component-selection-switchThumb
--st-component-control-hoverBackground
--st-component-control-focusRing
--st-component-field-labelText
--st-component-field-helpText
--st-component-control-hoverBorder