Published on

6 Easy Ways To Build A Toggle With Tailwind CSS

Tags
AlpinejsButtonsForms
Toggle

As a FrontEnd technology blogger, it is important to keep up with the latest trends and tools in the industry. One such tool that has gained popularity in recent years is Tailwind CSS. Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. In this article, we will explore six easy ways to build a toggle with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It is designed to be highly customizable and allows you to rapidly build custom user interfaces. Tailwind CSS is gaining popularity among developers due to its ease of use, flexibility, and scalability.

The description of Toggle ui component

A toggle is a user interface component that allows users to switch between two states. It is commonly used in web applications to enable or disable a feature or to switch between light and dark modes. A toggle typically consists of a switch that can be toggled between two states.

Why use Tailwind CSS to create a Toggle ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements. This makes it easy to create custom user interfaces without having to write a lot of CSS code. Tailwind CSS also provides a responsive grid system that allows you to create layouts that adapt to different screen sizes.

The preview of Toggle ui component

To create a toggle with Tailwind CSS, we will use a switch component. This switch component consists of a toggle button that can be toggled between two states. The toggle button is styled using Tailwind CSS classes to create a modern and sleek design.

Free download of the Toggle's source code

The source code of Toggle ui component

To create a toggle with Tailwind CSS, we will use HTML and CSS code. The HTML code consists of a switch component that contains a toggle button. The CSS code consists of Tailwind CSS classes that are used to style the toggle button.

<div class="flex justify-center items-center" x-data="{toggle: '0'}">
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>

  <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
       :class="[toggle === '1' ? 'bg-green-400' : 'bg-gray-400']">
    <label for="toggle"
           class="absolute left-0 bg-white border-2 mb-2 w-6 h-6 rounded-full transition transform duration-100 ease-linear cursor-pointer"
           :class="[toggle === '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"></label>
    <input type="checkbox" id="toggle" name="toggle"
           class="appearance-none w-full h-full active:outline-none focus:outline-none"
           @click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
  </div>
</div>

How to create a Toggle with Tailwind CSS?

Here are six easy ways to create a toggle with Tailwind CSS:

1. Using the Switch Component

The Switch component is a pre-built component in Tailwind CSS that can be used to create a toggle. To use the Switch component, add the following HTML code to your project:

<label class="flex items-center">
  <div class="relative">
    <input type="checkbox" class="sr-only" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a gray background and a white dot that can be toggled between two states.

2. Customizing the Switch Component

To customize the Switch component, you can use Tailwind CSS classes to style the toggle button. For example, you can change the color of the toggle button by adding the bg-blue-500 class:

<label class="flex items-center">
  <div class="relative">
    <input type="checkbox" class="sr-only" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-blue-500 rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a blue toggle button.

3. Using the Checkbox Component

You can also create a toggle using the Checkbox component in Tailwind CSS. To use the Checkbox component, add the following HTML code to your project:

<label class="flex items-center">
  <div class="relative">
    <input type="checkbox" class="hidden" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a gray background and a white dot that can be toggled between two states.

4. Customizing the Checkbox Component

To customize the Checkbox component, you can use Tailwind CSS classes to style the toggle button. For example, you can change the color of the toggle button by adding the bg-blue-500 class:

<label class="flex items-center">
  <div class="relative">
    <input type="checkbox" class="hidden" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-blue-500 rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a blue toggle button.

5. Using the Radio Component

You can also create a toggle using the Radio component in Tailwind CSS. To use the Radio component, add the following HTML code to your project:

<label class="flex items-center">
  <div class="relative">
    <input type="radio" class="hidden" name="toggle" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a gray background and a white dot that can be toggled between two states.

6. Customizing the Radio Component

To customize the Radio component, you can use Tailwind CSS classes to style the toggle button. For example, you can change the color of the toggle button by adding the bg-blue-500 class:

<label class="flex items-center">
  <div class="relative">
    <input type="radio" class="hidden" name="toggle" />
    <div class="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
    <div class="toggle__dot absolute w-6 h-6 bg-blue-500 rounded-full shadow inset-y-0 left-0"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle</div>
</label>

This code will create a toggle switch with a blue toggle button.

Conclusion

In this article, we explored six easy ways to build a toggle with Tailwind CSS. Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements, making it easy to create custom user interfaces without having to write a lot of CSS code. By using the Switch, Checkbox, and Radio components in Tailwind CSS, you can create modern and sleek toggles that can be customized to fit your specific needs.