This time I will share jQuery Plugin and tutorial about Checkbox Toggle Switch Plugin For Tailwind CSS Framework, hope it will help you in programming stack.
A tiny and fast jQuery plugin that helps developers create checkbox based on/off switches in the latest Tailwind CSS framework.
Easy to implement without any JS call. And highly customizable via HTML data
attribute.
How to use it:
1. Load the latest jQuery library and Tailwind CSS framework in the document.
1 |
< link href = "/path/to/cdn/tailwind.min.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
2. Download the package and load the jquery-tailwind-toggle.js
after jQuery but before the closing body
tag.
1 |
< script src = "jquery-tailwind-toggle.js" ></ script > |
3. To Cceate a default toggle switch, simply wrap your checkbox element in a label
element with the data-toggle=”checkbox-toggle” attribute and done.
1 |
< label data-toggle = "checkbox-toggle" > |
2 |
< input type = "checkbox" /> |
4. Customize the toggle switch with the following HTML data
attributes:
- data-rounded: rounded[-none|-sm|-lg|-full]
- data-handle-size: Handle size. Default: 20
- data-handle-color: Background color of the handle. Default: ‘bg-white’
- data-off-color: Background color when Off. Default: ‘bg-gray-400’
- data-on-color: Background color when On. Default: ‘bg-blue-400’
2 |
data-toggle = "checkbox-toggle" |
5 |
data-handle-color = "bg-white" |
6 |
data-off-color = "bg-gray-400" |
7 |
data-on-color = "bg-blue-600" > |
8 |
< input type = "checkbox" /> |