This is a collection of the 10 best JavaScript and/or CSS libraries that transform the normal checkboxes, radio buttons, or even any elements into switch-style toggle buttons for a better user experience.
Originally Published Jan 13 2018, updated Jan 30 2023
See also:
1. switchery
A simple component that helps you turn your default HTML checkbox inputs into beautiful iOS style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.
2. 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.
3. Realistic iOS Switch In Pure CSS
Switchery is a simple jQuery Vanilla JavaScript plugin that converts the standard Html checkboxes into flat iOS style toggle switches with nice sliding effects.
4. Smooth iOS Style Slide Switch Component – SlideOn
A tiny and fast UI component that converts normal checkbox inputs into customizable slide switches.
5. Toggle Switchy
A minimal CSS (SCSS) library used to convert the standard radio buttons into accessible, nice-looking switch controls using CSS3 transitions and 3D transforms.
6. el-checkbox
A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.
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. 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.
9. Elastic Gooey Toggle Switch Web Component – jellySwitch
The jellySwitch is a pretty nice, iOS-style toggle switch web component implemented in vanilla JavaScript.
10. iOS Style Pure CSS Switch Buttons – iOS Switcher
iOS Switcher uses Bootstrap grid styles and Html/CSS to create smooth, iOS-style switches with gooey effect.