10 Best Toggle Switches In JavaScript & Pure CSS (2020 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 29 2020

Table of contents:

• jQuery Toggle Switch Plugins
• Vanilla JavaScript Toggle Switch Plugins
• CSS Only Toggle Switches

jQuery Toggle Switch Plugins:

Customizable Switch Button Plugin For Bootstrap - Bootstrap Switch

A highly flexible and customizable jQuery plugin which converts the normal checkbox and radio inputs into swipe toggle switches using Bootstrap button styles.

[Demo] [Download]

---

jQuery Plugin For Sliding Toggle Switches - LC Switch

LC Switch is a tiny jQuery plugin that converts default checkbox & radio inputs into pretty switches or toggle buttons, with smooth sliding effects powered by CSS3 transitions.

[Demo] [Download]

---

CSS3 Animated jQuery Toggle Switch Plugin - rcSwitcher

rcSwitcher is a jQuery plugin that utilizes CSS3 transitions and transforms to generate smooth on/off toggle switches from regular checboxes and radio inputs.

[Demo] [Download]

---

jQuery Plugin For Switchy Select Options - Switchy

Switchy is a fancy and touch-enabled jQuery plugin that turns a standard html select into a slide/toggle switch that allows the visitor to select items by dragging or clicking the slider.

[Demo] [Download]

---

Touch-friendly Switch Buttons For Bootstrap 4 - switchButton

switchButton is a Bootstrap 4 plugin (< 4kb minified) that transforms the normal checkbox element into responsive, mobile-friendly, customizable switches and toggle buttons for the better experience.

[Demo] [Download]

---

Vanilla JavaScript Toggle Switch Plugins:

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.

[Demo] [Download]

---

Switch.js

Just another JavaScript plugin used for creating customizable, CSS3 animated, iOS-style on/off toggle switches from regular checkbox inputs.

[Demo] [Download]

---

CSS Only Toggle Switches:

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.

[Demo] [Download]

---

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.

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

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