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
Switchery is a simple jQuery Vanilla JavaScript plugin that converts the standard Html checkboxes into flat iOS style toggle switches with nice sliding effects.
2. Switch.js
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
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
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
Just another JavaScript plugin for creating iOS- and Material Design-style on/off switches from regular checkbox elements.
6. checkboxes.css
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
A customizable, nice clean, iOS- and Google Material Design-style toggle switch library created using pure CSS/SCSS.
8. TiTatoggle
TiTatoggle is a CSS extension to the Bootstrap framework that converts the regular checkbox inputs into different types of toggle switches.
9. jellySwitch
The jellySwitch is a pretty nice, iOS-style toggle switch web component implemented in vanilla JavaScript.
10. toggle-switch.css
The toggle-switch.css transforms the regular checkbox element into interactive toggle switches using pure CSS/CSS3.