Published on

Practical Guide: Create A Toggle switch without JS With Tailwind CSS

Tags
ButtonsFormsWidget
Toggle switch without JS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to create a responsive and customizable UI. It allows developers to quickly build a UI without writing custom CSS code. Tailwind CSS provides a wide range of pre-defined classes for typography, colors, spacing, and layout.

The description of Toggle switch without JS ui component

A toggle switch is a UI component that allows users to switch between two states. It is commonly used in settings, forms, and other UI components. A toggle switch can be created with HTML, CSS, and JavaScript. However, with Tailwind CSS, we can create a toggle switch without using JavaScript.

Why use Tailwind CSS to create a Toggle switch without JS ui component?

Tailwind CSS provides a set of pre-defined classes for creating a toggle switch. It eliminates the need for writing custom CSS code and JavaScript. It also provides a responsive and customizable UI that can be easily modified to fit the design requirements.

The preview of Toggle switch without JS ui component.

To create a toggle switch without JS with Tailwind CSS, we will use the following classes:

<label class="flex items-center">
  <input type="checkbox" class="hidden" />
  <span class="toggle__label relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ease-in-out bg-gray-400">
    <span class="toggle__dot absolute inset-0 w-4 h-4 rounded-full transition-transform duration-300 ease-in-out transform translate-x-0 bg-white"></span>
  </span>
</label>

Free download of the Toggle switch without JS's source code

The source code of Toggle switch without JS ui component.

To create a toggle switch without JS with Tailwind CSS, we will use the following classes:

.toggle__label:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.toggle__label input:checked + .toggle__dot {
  transform: translateX(100%);
  background-color: #48bb78;
}

.toggle__label input:checked ~ .toggle__text::before {
  content: "ON";
}

.toggle__label input:not(:checked) ~ .toggle__text::after {
  content: "OFF";
}

<style>
/* CHECKBOX TOGGLE SWITCH */
/* @apply rules for documentation, these do not work as inline style */
.toggle-checkbox:checked {
  @apply: right-0 border-green-400;
  right: 0;
  border-color: #68D391;
}
.toggle-checkbox:checked + .toggle-label {
  @apply: bg-green-400;
  background-color: #68D391;
}
</style>
               
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
    <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox 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>
<label for="toggle" class="text-xs text-gray-700">Toggle me.</label>

How to create a Toggle switch without JS with Tailwind CSS?

To create a toggle switch without JS with Tailwind CSS, follow the steps below:

  1. Create a label element with the flex and items-center classes.
<label class="flex items-center">
  <!-- toggle switch elements will be added here -->
</label>
  1. Add an input element with the hidden class to hide the checkbox.
<label class="flex items-center">
  <input type="checkbox" class="hidden" />
  <!-- toggle switch elements will be added here -->
</label>
  1. Add a span element with the toggle__label class to create the toggle switch.
<label class="flex items-center">
  <input type="checkbox" class="hidden" />
  <span class="toggle__label relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ease-in-out bg-gray-400">
    <span class="toggle__dot absolute inset-0 w-4 h-4 rounded-full transition-transform duration-300 ease-in-out transform translate-x-0 bg-white"></span>
  </span>
</label>
  1. Add a span element with the toggle__dot class to create the dot of the toggle switch.
<label class="flex items-center">
  <input type="checkbox" class="hidden" />
  <span class="toggle__label relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ease-in-out bg-gray-400">
    <span class="toggle__dot absolute inset-0 w-4 h-4 rounded-full transition-transform duration-300 ease-in-out transform translate-x-0 bg-white"></span>
  </span>
</label>
  1. Add the following CSS classes to create the toggle switch.
.toggle__label:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.toggle__label input:checked + .toggle__dot {
  transform: translateX(100%);
  background-color: #48bb78;
}

.toggle__label input:checked ~ .toggle__text::before {
  content: "ON";
}

.toggle__label input:not(:checked) ~ .toggle__text::after {
  content: "OFF";
}

Conclusion

In this article, we have learned how to create a toggle switch without JS with Tailwind CSS. We have seen how Tailwind CSS provides a set of pre-defined classes to create a responsive and customizable UI. We have also seen how easy it is to create a toggle switch with Tailwind CSS without writing custom CSS code and JavaScript. With Tailwind CSS, we can create a wide range of UI components quickly and easily.