10 Best Toggle Switches In JavaScript & Pure CSS (2021 Update)
Here are 10 best and top rated JavaScript & Pure CSS solutions to create user-friendly switch controls and toggle buttons for your web app. I hope you like it.
Originally Published Jan 03 2018, updated Jan 22 2021
Table of contents:
jQuery Toggle Switch Plugins:
jQuery Plugin For Sliding Toggle Switches - LC Switch
A tiny jQuery plugin that converts default checkbox & radio inputs into pretty switches or toggle buttons, with smooth sliding effects.
Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js
on-off-switch.js is a simple to use jQuery plugin used for generating toggle switches with custom text, colors and sizes form 'hidden' or checkbox inputs.
Touch-friendly Switch Buttons For Bootstrap 4 - switchButton
switchButton is a Bootstrap 4 plugin that transforms the normal checkbox element into responsive, mobile-friendly, customizable switches and toggle buttons.
Three States Toggle Switch With jQuery - jQuery jToggler
The jToggler jQuery plugin converts the normal checkbox into an iOS-style toggle switch that enables the user to select between three options: Checked, Unchecked and Indeterminate.
Basic ON/OFF Toggle Switches In jQuery - Switcher
Switcher is an ultra-light jQuery plugin that transforms the native Checkbox and Radio Button elements into iOS inspired on/off toggle switches just with a JS call.
Vanilla JavaScript Toggle Switch Plugins:
Switch.js
Just another JavaScript plugin used for creating customizable, CSS3 animated, iOS-style on/off toggle switches from regular checkbox inputs.
CSS Only Toggle Switches:
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.
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).
el-checkbox
A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.
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.
More Resources:
Want more jQuery plugins or JavaScript libraries to create awesome Switches & Toggle Button on the web & mobile? Check out the jQuery Switch and JavaScript/CSS Switch sections.
Not A jQuery user? Check out our 10 Best Toggle Switch JavaScript And CSS Libraries.