Switch @astryx-svelte/core v0.3.0 · Switch
Usage
A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for settings that apply immediately; the toggle should take effect without a separate save action. |
| Do | Pair with a clear, concise label that describes the setting being controlled. |
| Don't | Use for options that require a form submission to take effect; use a checkbox instead. |
| Don't | Use a switch for multi-state values; it's strictly on/off. |
| Don't | Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.Switch — Disabled
Disabled switch with label and description for gated features.
Switch — Settings Panel
Settings panel with spread-spaced switches in a card.
Switch — With Description
Toggle with a label and supporting description text.
Switch — With Status
Switches with error, warning, and success validation states.