Published on

The 5 Really Obvious Ways To Build A Toggle Component With Tailwind CSS Better That You Ever Did

Tags
Inputs
Toggle Component

As a FrontEnd technology blogger, I am always looking for ways to improve my UI components. Recently, I discovered Tailwind CSS, a utility-first CSS framework that allows you to quickly build custom UI components. In this article, I will show you how to build a Toggle Component with Tailwind CSS and share some tips to make it even better.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help you quickly build custom UI components. It allows you to focus on the functionality of your UI components rather than the design, which can save you a lot of time and effort.

The description of Toggle Component ui component

A Toggle Component is a UI component that allows users to switch between two states. It is commonly used in forms, settings, and other user interfaces where users need to make a binary choice.

Why use Tailwind CSS to create a Toggle Component ui component?

Tailwind CSS provides a set of pre-defined classes that can help you quickly build a Toggle Component. It also allows you to customize the appearance of your Toggle Component by modifying the pre-defined classes or creating your own.

The preview of Toggle Component ui component

To give you an idea of what a Toggle Component built with Tailwind CSS looks like, here is a preview:

Free download of the Toggle Component's source code

The source code of Toggle Component ui component

Here is the source code for the Toggle Component built with Tailwind CSS:

<label class="flex items-center relative w-max cursor-pointer select-none">
  <span class="text-lg font-bold mr-3">Toggle</span>
  <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500 bg-red-500" />
  <span class="absolute font-medium text-xs uppercase right-1 text-white"> OFF </span>
  <span class="absolute font-medium text-xs uppercase right-8 text-white"> ON </span>
  <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200" />
</label>

<style>
  body {
    background-color: #171717; /* bg-true-gray-900 */
    color: white;
  }

  input:checked {
    background-color: #22c55e; /* bg-green-500 */
  }

  input:checked ~ span:last-child {
    --tw-translate-x: 1.75rem; /* translate-x-7 */
  }
</style>

How to create a Toggle Component with Tailwind CSS?

Now that you have an idea of what a Toggle Component built with Tailwind CSS looks like, let's get started on building one.

Step 1: Set up your HTML

First, you need to set up your HTML. Here is a basic structure for a Toggle Component:

<div class="toggle-component">
  <input type="checkbox" id="toggle" class="toggle-input">
  <label for="toggle" class="toggle-label"></label>
</div>

In this structure, we have a container div with a class of "toggle-component". Inside the container, we have an input element with a type of "checkbox" and an id of "toggle". We also have a label element with a class of "toggle-label" and a "for" attribute that matches the id of the input element.

Step 2: Add Tailwind CSS classes

Next, we need to add some Tailwind CSS classes to our HTML to style our Toggle Component. Here are the classes we will use:

<div class="toggle-component relative inline-block w-10 mr-2 align-middle select-none">
  <input type="checkbox" id="toggle" class="toggle-input absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer">
  <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>

In this code, we have added a class of "relative" to the container div to allow us to position the input and label elements inside it. We have also added a class of "inline-block" to make the container display inline with other elements.

For the input element, we have added a class of "absolute" to position it within the container div. We have also added classes to set its width, height, border, and background color.

For the label element, we have added a class to set its width, height, and background color.

Step 3: Add JavaScript

Finally, we need to add some JavaScript to our Toggle Component to make it functional. Here is the code we will use:

const toggle = document.getElementById('toggle');
const toggleLabel = document.querySelector('.toggle-label');

toggle.addEventListener('change', function() {
  if (toggle.checked) {
    toggleLabel.classList.remove('bg-gray-300');
    toggleLabel.classList.add('bg-green-400');
  } else {
    toggleLabel.classList.remove('bg-green-400');
    toggleLabel.classList.add('bg-gray-300');
  }
});

In this code, we are using JavaScript to add an event listener to the input element. When the input element is checked, we remove the "bg-gray-300" class from the label element and add the "bg-green-400" class. When the input element is unchecked, we remove the "bg-green-400" class from the label element and add the "bg-gray-300" class.

Conclusion

In conclusion, building a Toggle Component with Tailwind CSS is a quick and easy way to add a functional UI component to your website or application. By using pre-defined classes and customizing them to fit your needs, you can create a Toggle Component that looks and works great. I hope this article has been helpful in showing you how to build a Toggle Component with Tailwind CSS and giving you some tips to make it even better.