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

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