svelte-toggle-switch Svelte Themes

Svelte Toggle Switch

Svelte Toggle Switch

Download

Svelte Toggle Switch

A comprehensive, accessible, and highly customizable toggle switch component for Svelte applications. Built with TypeScript and designed with accessibility in mind.

Features

āœØ 5 Design Variants: Slider (iOS), Inner, Modern, Material, and Multi-option
šŸŽØ Multiple Color Schemes: 6 built-in schemes + custom colors
šŸ“ 5 Size Options: From extra small to extra large
ā™æ Fully Accessible: ARIA attributes, keyboard navigation, screen reader support
šŸ”„ State Management: Disabled, loading, and read-only states
šŸŽÆ Icon Support: Custom icons with flexible positioning
āš” Smooth Animations: Customizable duration and easing
šŸ“¦ TypeScript: Full TypeScript support with proper types
šŸŽ­ Flexible Styling: Shadow, outline, and label positioning options
šŸš€ Modern Stack: Built with Svelte 5, Vite 6, and TypeScript 5

Installation

NPM

npm install svelte-toggle-switch

Yarn

yarn add svelte-toggle-switch

PNPM

pnpm add svelte-toggle-switch

Quick Start

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

  let enabled = false;
</script>

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

Design Variants

Slider (iOS Style)

The default design, inspired by iOS toggles.

<Switch bind:value={enabled} label="Enable dark mode" design="slider" />

Inner

Toggle with visible ON/OFF text inside the button.

<Switch bind:value={enabled} label="Auto-save" design="inner" />

Modern

Enhanced slider with optional icon displays on the track.

<Switch
  bind:value={enabled}
  label="Wi-Fi"
  design="modern"
  showIcons={true}
  onIcon="āœ“"
  offIcon="āœ•"
/>

Material

Google Material Design inspired toggle.

<Switch bind:value={enabled} label="Bluetooth" design="material" />

Multi-option

Radio group styled as a segmented control.

<Switch
  bind:value={selectedOption}
  label="View mode"
  design="multi"
  options={['Grid', 'List', 'Table']}
/>

Color Schemes

6 built-in color schemes plus custom color support.

<!-- Built-in schemes -->
<Switch bind:value={enabled} colorScheme="blue" />
<Switch bind:value={enabled} colorScheme="green" />
<Switch bind:value={enabled} colorScheme="red" />
<Switch bind:value={enabled} colorScheme="purple" />
<Switch bind:value={enabled} colorScheme="orange" />
<Switch bind:value={enabled} colorScheme="pink" />

<!-- Custom colors -->
<Switch
  bind:value={enabled}
  colorScheme="custom"
  color="#FF6B6B"
  offColor="#F0F0F0"
/>

Size Variants

<Switch bind:value={enabled} size="xs" label="Extra Small" />
<Switch bind:value={enabled} size="sm" label="Small" />
<Switch bind:value={enabled} size="md" label="Medium (Default)" />
<Switch bind:value={enabled} size="lg" label="Large" />
<Switch bind:value={enabled} size="xl" label="Extra Large" />

<!-- Custom size (in rem) -->
<Switch bind:value={enabled} size={2} label="Custom Size" />

States

Disabled

<Switch bind:value={enabled} label="Disabled" disabled />

Loading

Shows a spinner animation.

<Switch bind:value={enabled} label="Loading..." loading />

Read-only

Displays current state without allowing changes.

<Switch bind:value={enabled} label="Read-only" readonly />

Icons

Add custom icons to your toggles.

<!-- Slider with icons -->
<Switch
  bind:value={enabled}
  label="Theme"
  showIcons={true}
  onIcon="šŸŒ™"
  offIcon="ā˜€"
/>

<!-- Modern design with track icons -->
<Switch
  bind:value={enabled}
  label="Airplane Mode"
  design="modern"
  showIcons={true}
  onIcon="āœˆ"
  offIcon="āœ•"
/>

Advanced Customization

Label Position

<Switch
  bind:value={enabled}
  label="Label on left"
  labelPosition="left"
/>

Visual Enhancements

<!-- With shadow -->
<Switch bind:value={enabled} label="Shadow effect" shadow />

<!-- With outline -->
<Switch bind:value={enabled} label="Outline style" outline />

<!-- Without rounded corners (inner design only) -->
<Switch bind:value={enabled} design="inner" rounded={false} />

Custom Animations

<Switch
  bind:value={enabled}
  label="Custom animation"
  animationDuration={800}
  animationEasing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
/>

Accessibility Props

<Switch
  bind:value={enabled}
  id="custom-id"
  ariaLabel="Toggle notifications"
  ariaDescribedBy="notification-description"
/>

Complete API Reference

Props

Prop Type Default Description
value boolean | string false Current value (use with bind:value)
label string '' Label text displayed next to the switch
design 'inner' | 'slider' | 'modern' | 'ios' | 'material' | 'multi' 'slider' Visual design variant
options string[] [] Options array (required for multi design)
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number 'md' Size variant or custom size in rem
color string '#007AFF' Custom active color (CSS color value)
offColor string '#E5E7EB' Custom inactive color (CSS color value)
colorScheme 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'pink' | 'custom' 'blue' Built-in color scheme
disabled boolean false Disables interaction
loading boolean false Shows loading spinner
readonly boolean false Makes switch read-only
showIcons boolean false Display icons on the switch
onIcon string 'āœ“' Icon shown when active
offIcon string 'āœ•' Icon shown when inactive
animationDuration number 300 Animation duration in milliseconds
animationEasing string 'ease-in-out' CSS easing function
ariaLabel string '' ARIA label for accessibility
ariaDescribedBy string '' ARIA described-by attribute
id string auto-generated Custom element ID
labelPosition 'left' | 'right' 'right' Position of the label
rounded boolean true Use rounded corners (inner design)
shadow boolean false Add box shadow
outline boolean false Add border outline

Accessibility

This component follows WAI-ARIA best practices:

  • Proper role="switch" and role="radiogroup" attributes
  • aria-checked state management
  • aria-labelledby and aria-describedby support
  • Full keyboard navigation (Space and Enter keys)
  • Focus indicators with :focus-visible
  • Screen reader friendly
  • Disabled state properly communicated

Browser Support

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • iOS Safari (latest)
  • Chrome for Android (latest)

TypeScript

This package includes TypeScript definitions. All props are fully typed for the best development experience.

import type { ComponentProps } from 'svelte';
import Switch from 'svelte-toggle-switch';

type SwitchProps = ComponentProps<Switch>;

Examples

Dark Mode Toggle

<script>
  let darkMode = false;

  $: if (darkMode) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

<Switch
  bind:value={darkMode}
  label="Dark mode"
  showIcons={true}
  onIcon="šŸŒ™"
  offIcon="ā˜€"
  colorScheme="purple"
/>

Form Integration

<script>
  let formData = {
    notifications: false,
    marketing: false,
    newsletter: true
  };
</script>

<form>
  <Switch bind:value={formData.notifications} label="Push notifications" />
  <Switch bind:value={formData.marketing} label="Marketing emails" />
  <Switch bind:value={formData.newsletter} label="Newsletter" />
</form>

Async Toggle

<script>
  let enabled = false;
  let loading = false;

  async function handleToggle() {
    loading = true;
    try {
      await api.updateSetting(enabled);
    } catch (error) {
      // Revert on error
      enabled = !enabled;
    } finally {
      loading = false;
    }
  }

  $: if (enabled !== undefined) {
    handleToggle();
  }
</script>

<Switch bind:value={enabled} {loading} label="Enable feature" />

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run check

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT Ā© Ishan Karunaratne

Repository

GitHub Repository

Changelog

Version 2.0.0 (Latest)

Major Rewrite - Complete redesign with modern features:

  • āœØ Added TypeScript support
  • āœØ Added 3 new design variants (Modern, Material, Multi)
  • āœØ Added 6 built-in color schemes + custom colors
  • āœØ Added 5 size variants (xs, sm, md, lg, xl)
  • āœØ Added loading state with spinner animation
  • āœØ Added icon support with custom positioning
  • āœØ Added disabled and read-only states
  • āœØ Added customizable animations
  • āœØ Added shadow and outline options
  • āœØ Added label positioning (left/right)
  • āœØ Enhanced accessibility (ARIA, keyboard navigation)
  • šŸ“¦ Updated to Svelte 5, Vite 6, TypeScript 5
  • šŸŽØ Complete UI/UX improvements
  • šŸ“š Comprehensive documentation

Version 1.0.0

  • Initial release with basic toggle functionality

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes