Switch

Toggle switch with spring animation, 3 sizes, label, hint, and disabled state.

Import

ts 
import Switch from '$lib/components/Switch.svelte';

Usage

svelte 
<Switch bind:checked={value} label="Enable notifications" />

Basic

With label and optional hint text.

svelte 
<Switch bind:checked={value} label="Enable notifications" />
<Switch bind:checked={value} label="Dark mode" hint="Switch to dark theme" />
<Switch bind:checked={value} />

Sizes

sm · md · lg

svelte 
<Switch bind:checked={value} size="sm" label="Small"  />
<Switch bind:checked={value} size="md" label="Medium" />
<Switch bind:checked={value} size="lg" label="Large"  />

Disabled

Prevents interaction in both on and off states.

svelte 
<Switch checked={false} label="Disabled (off)" disabled />
<Switch checked={true}  label="Disabled (on)"  disabled />

Use Case — Notification Settings

Real-world settings panel with dependent controls.

Notifications

Push Notifications

Enable or disable all notifications

Notification Sound

Play notification sound

Vibration

Vibrate in silent mode

Privacy

Dark Mode

Switch to dark theme

Private Profile

Hide your profile from others

API Reference

PropTypeDefaultDescription
checked booleanfalseBindable checked (on/off) state of the switch.
label string—Text label displayed next to the switch.
hint string—Secondary hint text shown below the label.
size 'sm' | 'md' | 'lg''md'Size preset affecting the track and thumb dimensions.
disabled booleanfalsePrevents interaction and reduces opacity.
onchange (v: boolean) => void—Callback fired when the switch state changes.