@keenmate/svelte-switch

A modern, customizable switch component library for Svelte 5 with binary and multi-step switches, generic typing, and a full theming layer.

🚀 Get Started 🎯 View Examples GitHub
🔄 Basic Switch
Toggle me:
State: false
🎛️ Multi Switch
Power level:
Option 1
Level: Off
⚡
Svelte 5 Native

Built on Svelte 5 runes and snippets. Generic over item type <T> with proper TypeScript inference.

🎨
Theming Layer

--base-* cross-library cascade + --sw-* per-instance overrides. Compatible with @keenmate/theme-designer.

🔄
Binary & Multi-Step

Switch (binary on/off) and MultiSwitch (3+ steps) share the same prop conventions and event model.

📐
Named Sizes

size='xs|sm|md|lg|xl' aligned to pure-admin form heights (31/33/35/38/41px). Numeric size still works.

♿
Accessible

Per-step labels are real <button>s with keyboard activation. Focus rings, ARIA attributes, disabled states.

📦
TypeScript Ready

Full TypeScript with generics. Switch.items is a strict tuple [T, T]; MultiSwitch.items flows through to all snippets.

Quick Installation

Get started in seconds

Package Manager
npm 
 
 
pnpm 
 
 
 
yarn 
 
 
 
Import
 
Import components 
 
 
 
Usage
 
Simple to Use
 
Install with your package manager, then import and use. Both components are
						bindable and generic over the item type.
 
Zero Configuration
 
Sensible defaults out of the box. Drop into pure-admin forms with no theming
						work — the new 'md' default size matches input heights.
 
Themable
 
Wrap any parent in --base-accent-color etc. and every nested
						switch picks up the theme. Per-instance --sw-* overrides for one-off tweaks.
 
Example Usage
 
Basic Switch 
 
 
 
Multi Switch 
 
 
 
Advanced Examples
 
🎨 Styled Switch
 
Custom style: 
 State: false
 
📐 Vertical Switch
 
Vertical: 
 State: false
 
2
 
Switch Types
 
∞
 
Customization Options
 
100%
 
TypeScript
 
MIT
 
License