Accessible Performant Toggle Switch In Pure JavaScript – simple-switch

Category: Form , Javascript | July 2, 2025
Author:ava-cassiopeia
Views Total:3,525 views
Official Page:Go to website
Last Update:July 2, 2025
License:MIT

Preview:

Accessible Performant Toggle Switch In Pure JavaScript – simple-switch

Description:

simple-switch is a  JavaScript plugin for creating iOS- and Material Design-style on/off switches from regular checkbox elements.

How to use:

1. Install and import the simple-switch component.

# NPM
$ npm install a-simple-switch
import * as SimpleSwitch from "a-simple-switch";
@import "path/to/SimpleSwitch/src/sass/SimpleSwitch.scss";

2. Place the following JavaScript and CSS files into the HTML file.

<link href="SimpleSwitch.css" rel="stylesheet">
<script src="SimpleSwitch.min.js"></script>

3. Add the data-type="simple-switch" attribute to the checkbox element wrapped in a label element as this:

<label>
  <input type="checkbox" data-type="simple-switch">
  JavaScript
</label>

4. To create a Material Design toggle switch, just add the data-material=”true” to the checkbox:

<label>
  <input type="checkbox" data-type="simple-switch" data-material="true">
  JavaScript
</label>

5. Initialize the SimpleSwitch.

SimpleSwitch.init();

6. Toggle the switch via JavaScript.

SimpleSwitch.toggle(checkboxElement);
SimpleSwitch.toggle(checkboxElement, true);
SimpleSwitch.toggle(checkboxElement, false);

Changelog:

v0.9.14 (07/02/2025)

  • Update dependencies

v0.9.13 (03/03/2025)

  • Bugfixes

v0.9.5 (03/01/2025)

  • Bugfixes

v0.9.0 (11/21/2022)

  • Rewrite in TypeScript

v0.8.0 (05/26/2022)

  • Add a JS method for toggling the switch

v0.7.1 (03/07/2022)

  • Add Better Support For Parameters on Init

v0.7.0 (01/23/2021)

  • Add Support for Emitting ‘Input’ Event

v0.6.0 (12/12/2020)

  • Add Disabled-state Support

v0.5.0 (10/27/2018)

  • Fixed bug where change event wouldn’t fire when Switch changed

You Might Be Interested In:


Leave a Reply