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
 
 
 
 
Code Examples
 
Basic Usage
 
Import the components you need and use them with reactive state variables.
						Both Switch and MultiSwitch support two-way binding with the bind: directive.
 
State Management
 
Use Svelte 5's $state rune for reactive variables, or any reactive
						store pattern you prefer.
 
TypeScript Support
 
Full TypeScript support is included with proper type definitions for all props
						and events.
 
Component Overview
 
🔄 Switch Component
 
A binary switch component for on/off states.
 
  • ✅ Binary (true/false) state
    •  
  • ✅ Horizontal and vertical orientations
    •  
  • ✅ Custom styling support
    •  
  • ✅ Size customization
    •  
  • ✅ Disabled state
    •  
  • ✅ Custom thumb templates
 
🎛️ MultiSwitch Component
 
A multi-state switch for selecting from multiple options.
 
  • ✅ Multiple states (3+ options)
    •  
  • ✅ Custom item arrays
    •  
  • ✅ Label display with positioning
    •  
  • ✅ All Switch features
    •  
  • ✅ Custom label templates
    •  
  • ✅ Flexible styling per item
 
Requirements
 
Svelte 5
 
This library requires Svelte 5 or later. It uses modern Svelte features
					like runes and snippets for optimal performance and developer experience.
 
Next Steps
 
🎯
 
View Examples
 
Explore detailed examples and use cases
 View Examples
 
📚
 
API Reference
 
Complete documentation of all props and methods
 API Docs
 
🎮
 
Playground
 
Try out different configurations interactively
 Examples