Published on

6 Tips To Build A Switch toggle With Tailwind CSS

Switch toggle

In this article, we will discuss how to create a switch toggle UI component with Tailwind CSS. We will go through the steps required to build a switch toggle and provide tips to make the process easier.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to help developers build user interfaces quickly. It allows developers to create custom designs without writing CSS code from scratch.

The description of Switch toggle UI component

A switch toggle is a UI component that allows users to toggle between two states. It is commonly used in web applications to turn features on or off.

Why use Tailwind CSS to create a Switch toggle UI component?

Tailwind CSS provides a set of pre-defined classes that can be used to create a switch toggle UI component quickly. It also provides responsive design options that allow the switch toggle to adapt to different screen sizes.

The preview of Switch toggle UI component

To create a switch toggle UI component, we will use Tailwind CSS classes to style an HTML input element. The switch toggle will have two states, on and off.

Free download of the Switch toggle's source code

The source code of Switch toggle UI component

To create a switch toggle UI component, we will use the following HTML and CSS code.

<!-- Not toggled switch -->
<div class="w-full h-full flex flex-col justify-center items-center">
    <div class="flex justify-center items-center">
    <span class="">
        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
    </span>
    <!-- Switch Container -->
    <div :class="{ 'bg-cyan-700': toggleActive}" class="w-14 h-7 flex items-center bg-gray-300 rounded-full mx-3 px-1" @click="handleToggleActive">
        <!-- Switch -->
        <div class="bg-white w-5 h-5 rounded-full shadow-md transform" :class="{ 'translate-x-7': toggleActive}"></div>
    </div>
    <span class="">
        <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
    </span>
</div>
<!-- Toggled switch -->
<div class="flex justify-center items-center mt-4">
    <span class="">
        <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
    </span>
    <!-- Switch Container -->
    <div class="w-14 h-7 flex items-center bg-gray-300 rounded-full mx-3 px-1 bg-blue-700" @click="handleToggleActive">
        <!-- Switch -->
        <div class="bg-white w-5 h-5 rounded-full shadow-md transform translate-x-7"></div>
    </div>
    <span class="">
        <svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
    </span>
</div>
</div>

How to create a Switch toggle with Tailwind CSS?

Here are the steps to create a switch toggle UI component with Tailwind CSS:

Step 1: Create an HTML input element

The first step is to create an HTML input element with the type set to "checkbox". This will be the base for our switch toggle.

<input type="checkbox" class="toggle-checkbox">

Step 2: Style the input element with Tailwind CSS classes

Next, we will use Tailwind CSS classes to style the input element. We will add a label element that will be used to toggle the switch.

<label for="toggle" class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" id="toggle" class="sr-only toggle-checkbox">
    <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">Toggle me</div>
</label>

The "sr-only" class is used to hide the input element from screen readers. The "toggle-checkbox" class is used to style the input element. The label element is used to toggle the switch.

Step 3: Style the switch toggle with CSS

Finally, we will add some CSS code to style the switch toggle. We will use the "checked" pseudo-class to change the state of the switch toggle.

.toggle-checkbox:checked + .dot {
  transform: translateX(6px);
  background-color: #48bb78;
}

This code will move the dot to the right and change its background color when the switch toggle is in the "on" state.

Conclusion

In this article, we discussed how to create a switch toggle UI component with Tailwind CSS. We went through the steps required to build a switch toggle and provided tips to make the process easier. With Tailwind CSS, developers can create custom designs quickly and easily.