Composant · Formulaire
Toggle
StableBascule compacte en mode switch avec libellé d’état "On/Off" (ou labels personnalisés), dimensions sm/md et liaison contrôlée.
Exemples
Variantes
Voir le code (Svelte)
<Toggle label="Notifications e-mail" />
<Toggle label="Mode compact (sm)" size="sm" checked />
<Toggle label="Mode compact désactivé" disabled />Notifications : Off · Mode compact : On
Libellés personnalisés
Voir le code (Svelte)
<Toggle label="Dark mode" labelOn="Activé" labelOff="Désactivé" />État actuel : Désactivé
API
| Prop | Type | Default |
|---|---|---|
label | string | required |
labelOn | string | "On" |
labelOff | string | "Off" |
helperText | string | optionnel |
size | "sm" | "md" | "md" |
checked | boolean ($bindable) | false |
disabled | boolean | false |
class | string | optionnel |
Notes d’usage
Le composant expose `role="switch"` côté input HTML pour conserver le modèle d’accessibilité attendu.
Utiliser `checked` en binding si l’état doit être piloté par un store parent ; le composant n’émet pas d’événement métier dédié.
Pour des libellés d’état plus complexes, laissez un `helperText` dédié en dehors de la ligne principale.
Tokens utilisés
--st-component-field-labelText--st-component-field-helpText--st-component-control-focusRing--st-component-control-hoverBackground--st-component-selection-switchTrack--st-component-selection-switchThumb--st-component-selection-switchTrackChecked--st-semantic-action-primary--st-semantic-border-interactive--st-semantic-border-strong--st-semantic-surface-default--st-semantic-text-primary--st-semantic-text-secondary--st-toggle-trackWidth--st-toggle-trackHeight--st-toggle-thumbSize--st-motion-fast--st-motion-easing--st-radius-pill--st-component-control-hoverBorder