10 Best Toggle Switch JavaScript And CSS Libraries (2020 Update)

This is a collection of 10 best JavaScript and/or CSS libraries that transform the normal checkboxes, radio buttons or even any elements into switch-style toggle buttons for better user experience.

Originally Published Jan 13 2018, updated Mar 16 2020

See also:

1. Creating iOS Style Toggle Switches With Switchery.js

Creating iOS Style Toggle Switches With Switchery.js

Switchery is a simple jQuery Vanilla JavaScript plugin that converts the standard Html checkboxes into flat iOS style toggle switches with nice sliding effects.

Demo Download


2. Switch.js

Switch.js

Demo Download

Just another JavaScript plugin used for creating customizable, CSS3 animated, iOS-style on/off toggle switches from regular checkbox inputs.


3. Accessible CSS Only Toggle Switches

accessible-css-only-toggle-switches

Demo Download

A pure CSS approach to creating beautiful, accessible toggle switches from checkboxes and radio buttons. Compatible with Bootstrap and Foundation CSS frameworks.


4. Custom Switch

iOS Style Switches For Bootstrap 4 – Custom Switch

Demo Download

Custom Switch is a pure CSS extension for the Bootstrap 4 framework that converts the regular checkboxes into iOS style toggle buttons (switches).


5. Accessible Performant Toggle Switch In Pure JavaScript

Accessible Performant Toggle Switch In Pure JavaScript

Demo Download

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


6. checkboxes.css

Pretty Checkbox CSS Library – checkboxes.css

Demo Download

checkboxes.css is a pure CSS library used to prettify the regular checkbox inputs with custom styles as shown in the demo page.


7. Material and iOS Inspired Toggle Switch With CSS/SCSS

Material and iOS Inspired Toggle Switch With CSS/SCSS

Demo Download

A customizable, nice clean, iOS- and Google Material Design-style toggle switch library created using pure CSS/SCSS.


8. TiTatoggle

Converts Bootstrap Checkboxes Into Toggle Switches - TiTatoggle

Demo Download

TiTatoggle is a CSS extension to the Bootstrap framework that converts the regular checkbox inputs into different types of toggle switches.


9. jellySwitch

Elastic Gooey Toggle Switch Web Component - jellySwitch

Demo Download

The jellySwitch is a pretty nice, iOS-style toggle switch web component implemented in vanilla JavaScript.


10. toggle-switch.css

CSS Only Interactive Toggle Switches - toggle-switch.css

Demo Download

The toggle-switch.css transforms the regular checkbox element into interactive toggle switches using pure CSS/CSS3.


You Might Be Interested In: