Svelte Toggle Switch
A comprehensive, accessible toggle switch component for Svelte applications. Eight design variants, nine color themes, Svelte 5 runes, and powerful interaction modes.
Features
8 Design Variants
Slider/iOS, Inner, Modern, Material, Multi, Neon, Flip, Pill
9 Color Schemes
Blue, green, red, purple, orange, pink, yellow, indigo, teal + custom
5 Size Options
From XS to XL, or custom sizes for perfect fit
Dark Mode + Gradients
Auto dark mode detection, 5 gradient presets, RTL support
Touch & Drag
Swipe-to-toggle, drag momentum, haptic feedback
Confirm to Toggle
Async confirmation callback or inline Yes/No prompt
Long Press
Animated progress ring — prevents accidental toggles
Fully Accessible
ARIA labels, keyboard navigation, screen reader support
TypeScript First
Full SwitchProps type + Svelte 5 runes throughout
Quick Start
Installation
npm install svelte-toggle-switchBasic Usage
<script> import Switch from 'svelte-toggle-switch'; let value = false; </script> <Switch bind:value label="Enable notifications" />
3 New Design Variants
Neon glow, 3D card flip, and binary pill button — all with the same powerful API.
Neon
Cyberpunk glow with color-matched bloom
design="neon"Flip
3D card flip with custom face content
design="flip"Pill
Binary segmented control with pill buttons
design="pill"