JQuery Toggle Switch Plug-in for Tailwind CSS

jQuery Tailwind Checkbox Toggle is a small and fast plugin from jQuery that helps developers create an on/off switch-based checkbox in the latest Tailwind CSS framework.

How to make use of it:

1. Load the most recent jQuery library and Tailwind CSS framework within the doc.

<link href="/path/to/cdn/tailwind.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Download the package deal and load the jquery-tailwind-toggle.js after jQuery however earlier than the closing body tag.

<script src="jquery-tailwind-toggle.js"></script>

3. To Create a default toggle swap, simply wrap your checkbox component in a label component.

<label data-toggle="checkbox-toggle">
  <input type="checkbox" />
</label>

4. Customize the toggle switch with the following HTML data attributes:

<label
  data-toggle="checkbox-toggle"
  data-rounded="rounded"
  data-handle-size="20"
  data-handle-color="bg-white"
  data-off-color="bg-gray-400"
  data-on-color="bg-blue-600">
  <input type="checkbox" />
</label>

Checkbox Toggle Switch Plugin, jQuery Tailwind Checkbox Toggle Plugin/Github


See Demo And Download

Official Website(jqueryscript):Click Here

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

Share