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 Jan 2 2019
See also:
1. 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.
2. el-checkbox
el-checkbox is a pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.
3. Realistic iOS Switch In Pure CSS
A pure CSS approach to iOS inspired toggle switch with a gooey sliding effect.
4. CSS3 Only iOS Switch Button
Yet another CSS/CSS3 solution to creating an iOS-style switch toggle button animated with CSS3 transforms and transitions.
5. 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).
6. 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.
7. 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.
8. Minimal Material Design Toggle Switch
This is a Material Design inspired toggle switch created from normal checkbox input. Written in CSS and a little JavaScript.
9. 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.
10. Themeable Toggle Switches In Pure CSS
A pure CSS library which converts the normal checkbox inputs into iOS-style switches with 8 built-in themes.