10 Best Toggle Switches In JavaScript & Pure CSS (2021 Update)

by jQueryScript,

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.

jQuery Plugin For Sliding Toggle Switches - LC Switch

[Demo] [Download]


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.

Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js

[Demo] [Download]


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.

Touch-friendly Switch Buttons For Bootstrap 4 - switchButton

[Demo] [Download]


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.

Three States Toggle Switch With jQuery - jQuery jToggler

[Demo] [Download]


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.

Basic ON/OFF Toggle Switches In jQuery - Switcher

[Demo] [Download]


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.

Switch.js

[Demo] [Download]


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.

Realistic iOS Switch In Pure CSS

Demo Download


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).

iOS Style Switches For Bootstrap 4 Custom Switch

Demo Download


el-checkbox

A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.

el-checkbox

Demo Download


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.

Material and iOS Inspired Toggle Switch With CSS/SCSS

Demo Download


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.