Svelte Toggle Switch

A comprehensive, accessible toggle switch component for Svelte applications. Five design variants, six color themes, and extensive customization options.

Try me out

Try Playground Documentation

Features

🎨

5 Design Variants

Slider/iOS, Inner text, Modern, Material, Multi-option designs

🌈

6 Color Schemes

Beautiful pre-built themes: blue, green, red, purple, orange, pink

📏

5 Size Options

From XS to XL, or custom sizes for perfect fit

🎭

Custom Icons

Use any emoji or text as on/off icons

⚙️

Highly Customizable

Colors, animations, shadows, outlines, and more

♿

Fully Accessible

ARIA labels, keyboard navigation, screen reader support

📱

Multi-Option Mode

Segmented control with multiple choices

🎯

TypeScript First

Full TypeScript support with type definitions

Quick Start

Installation

npm install svelte-toggle-switch

Basic Usage

<script>
  import Switch from 'svelte-toggle-switch';

  let value = false;
</script>

<Switch bind:value label="Enable notifications" />

Ready to get started?

Explore the playground and see all features in action

Open Playground