Components
Switch
A native checkbox styled as an on/off switch with bindable checked state.
Props
Native attributes and event handlers are forwarded to the input element.
Native input attributes and handlers go to the checkbox; type and role are fixed to checkbox and switch. The class prop styles the wrapping label. element binds the input. Supply children or an accessible label. Theme keys switch and switchControl style the label and input.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Bindable on/off state. |
children | Snippet | undefined | Content rendered inside the component. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLInputElement | null | null | Bindable reference to the native element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility; removing the component runs its exit transition. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
theme | Theme | global theme | Local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Switch from sveltewind/components. This example shows its default styling in a usable context.
Notifications: off
Loading...Examples
Theme variants
Every variant available for Switch in the built-in themes is shown below.
compact — Apply the compact variant.
Notifications: off
Loading...comfortable — Apply the comfortable variant.
Notifications: off
Loading...full — Apply the full variant.
Notifications: off
Loading...secondary — Apply the secondary variant.
Notifications: off
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Notifications: off
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Notifications: off
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Notifications: off
Loading...Loading...