Installation

Choose your preferred package manager

npm
 
 
pnpm
 
 
 
 
yarn
 
 
 
 
Quick Start
 
Basic usage examples to get you started
 
Basic Switch
 
Basic toggle: 
 State: false
 
 
 
 
Multi Switch
 
Power level: 
  
 
 
Option 1
 Level: Off
 
 
 
 
Notes
 
Two-way Binding
 
Use bind:checked for Switch and bind:selectedIndex for MultiSwitch. State updates flow both directions.
 
State Management
 
Use Svelte 5's $state rune for reactive variables, or any
						reactive store pattern you prefer.
 
TypeScript
 
Both components are generic over the item type T, inferred from
						the items prop. Snippet contexts get the right item type without
						explicit annotations.
 
Vanilla JavaScript Usage
 
Mount components outside Svelte apps using mount() + $state
 
Recipe
 
 
 
 
Why $state?
 
Svelte 5 props are reactive. Pass a $state object to mount() and mutate it later — no update() method needed.
 
The 1.x .update() escape hatch was removed in 2.0; this is the
						idiomatic Svelte 5 replacement.
 
Component Overview
 
🔄 Switch
 
Binary on/off toggle.
 
  • ✅ Binary (true/false) state via bind:checked
    •  
  • ✅ Horizontal and vertical orientations
    •  
  • ✅ Named sizes (xs/sm/md/lg/xl) or numeric pixels
    •  
  • ✅ Custom itemStyles per state
    •  
  • ✅ Disabled state
    •  
  • ✅ thumb snippet for custom thumb content
    •  
  • ✅ Generic over item type T
 
🎛️ MultiSwitch
 
Multi-step switch (3+ options).
 
  • ✅ Any number of items via items array
    •  
  • ✅ Auto label rendering with shouldDisplayLabels
    •  
  • ✅ labelMember / labelCallback / label snippet
    •  
  • ✅ All Switch features
    •  
  • ✅ Separate thumb + segment snippets
    •  
  • ✅ Per-step itemStyles
    •  
  • ✅ Clickable per-step labels (vertical mode)
 
Requirements
 
Svelte 5
 
Svelte 5 or later. The library uses runes ($state, $props, $derived) and snippets — there is no Svelte 4
					compatibility build.
 
Next Steps
 
🎯
 
View Examples
 
Explore detailed examples and use cases
 View Examples
 
🎨
 
Theming
 
--base-* cascade and per-instance overrides
 Theming Guide
 
📚
 
API Reference
 
Complete documentation of all props
 API Docs