Accessible Performant Toggle Switch In Pure JavaScript

Category: Form , Javascript | December 12, 2020
Author: aeolingamenfel
Views Total: 138 views
Official Page: Go to website
Last Update: December 12, 2020
License: MIT


Accessible Performant Toggle Switch In Pure JavaScript


Just another JavaScript plugin for creating iOS- and Material Design-style on/off switches from regular checkbox elements.

How to use:

Place the following JavaScript and CSS files into the html file.

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

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

  <input type="checkbox" data-type="simple-switch">

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

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


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