Svelte Toggle screenshot

Svelte Toggle

Author Avatar Theme by Metonym
Updated: 21 Oct 2025
46 Stars

Accessible toggle switch component

Categories

Overview

The Svelte Toggle component is an accessible toggle switch that implements the recommended accessibility practices for toggle buttons according to the Inclusive Components guide.

Features

  • Toggles the component by default
  • Supports two-way binding for the toggled state
  • Allows customization of toggle switch descriptors, small variant, colors, label text, and hidden label
  • Provides a disabled state for the toggle switch
  • Can be fully controlled and styled by the user

Installation

To install the Svelte Toggle component, follow these steps:

  1. Open your project directory in the terminal.
  2. Run the following command to install the component:
npm install svelte-toggle
  1. Import the Svelte Toggle component in your project:
import Toggle from 'svelte-toggle';
  1. You can now use the Toggle component in your Svelte application.

Summary

The Svelte Toggle component is an accessible and customizable toggle switch that follows recommended accessibility practices. It provides various features such as default toggled state, two-way binding, customizable descriptors, colors, label text, and more. The component can be installed and used easily in a Svelte project.