Use our Tailwind CSS switch component to let users adjust settings on/off. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
Use the following example to create a simple and easy-to-use switch component for your Tailwind CSS project.
<div class="form-check form-switch mb-4 flex items-center">
<input
class="absolute z-10 h-5 w-8 cursor-pointer opacity-0"
data-attribute="toggle"
id="remember"
/>
<div class="form-check-input"></div>
<label
class="form-check-label mb-0 ml-2 cursor-pointer select-none"
for="remember"
>Remember me</label
>
</div>The switch/toggle component needs a required script files to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/toggle.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/toggle.js"></script>