checkbox switch tailwind css - Free Download Checkbox Toggle Switch Plugin For Tailwind CSS Framework

Free Download Checkbox Toggle Switch Plugin For Tailwind CSS Framework

Posted on

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.

checkbox switch tailwind css - Free Download Checkbox Toggle Switch Plugin For Tailwind CSS Framework
File Size: 4.84 KB
Views Total: 1399
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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" />
3 </label>

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’
1 <label
2   data-toggle="checkbox-toggle"
3   data-rounded="rounded"
4   data-handle-size="20"
5   data-handle-color="bg-white"
6   data-off-color="bg-gray-400"
7   data-on-color="bg-blue-600">
8   <input type="checkbox" />
9 </label>