Press "Enter" to skip to content

Simple CSS Toggle Switch UI element In Pure JavaScript

Simple, easy-to-access, and high-performance implementation of Switch UI. This JavaScript plug-in for creating iOS-style On / Off switches and Material Design from regular checkbox items.

css toggle switch with text, bs toggle switch, toggle switch html, css toggle switch with two labels, toggle switch bs4

How to make use of:

1. Place the next JavaScript and CSS information into the HTML file.

<link href="SimpleSwitch.css" rel="stylesheet">
<script src="SimpleSwitch.min.js"></script>

2. Add the data-type="simple-switch" attribute to the checkbox component wrapped in label component as this:

<label>
  <input type="checkbox" data-type="simple-switch">
</label>

3. To create a Material Design toggle switch, simply add the data-material=” true” to the checkbox:

<label>
  <input type="checkbox" data-type="simple-switch" data-material="true">  
</label>

Accessible Performant Toggle Switch, Simple Switch Plugin/Github

Simple Switch Demo


See Demo And Download

Official Website(aeolingamenfel): Click Here

This superior jQuery/javascript plugin is developed by aeolingamenfel. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *