Home
SHARIFUL ISLAM
Interactive Toggle Switch with Smooth Animation

Interactive Toggle Switch with Smooth Animation

A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

This tailwind example is contributed by SHARIFUL ISLAM, on 05-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Button Toggle switch

Author SHARIFUL ISLAM

1.3k

2

Fork Fullscreen

<div class="flex items-center justify-center h-screen">
  <div class="flex items-center">
    <input
      type="checkbox"
      id="toggleSwitch"
      class="hidden"
      onchange="toggleSwitch(this)"
    />
    <label
      for="toggleSwitch"
      class="select-none relative inline-flex h-6 w-14 items-center rounded-full transition-colors duration-200 cursor-pointer bg-[#E6E6E6]"
    >
      <span
        id="toggleText"
        class="absolute w-full text-xs transition-transform duration-200 text-right pr-1.5 text-black"
      >
        OFF
      </span>
      <span
        id="toggleBall"
        class="inline-block w-[17px] h-[17px] transform rounded-full bg-white transition-transform duration-200 translate-x-1"
      ></span>
    </label>
  </div>
</div>

<script>
  function toggleSwitch(input) {
    const label = input.nextElementSibling;
    const text = label.querySelector("#toggleText");
    const ball = label.querySelector("#toggleBall");

if (input.checked) {
      label.classList.add("bg-[#0E947A]");
      label.classList.remove("bg-[#E6E6E6]");
      text.textContent = "ON";
      text.classList.remove("text-black", "text-right", "pr-1.5");
      text.classList.add("text-white", "text-left", "pl-2");
      ball.style.transform = "translateX(36px)";
    } else {
      label.classList.add("bg-[#E6E6E6]");
      label.classList.remove("bg-[#0E947A]");
      text.textContent = "OFF";
      text.classList.remove("text-white", "text-left", "pl-2");
      text.classList.add("text-black", "text-right", "pr-1.5");
      ball.style.transform = "translateX(4px)";
    }
  }
</script>

Related Examples

Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

10.4k
Switch tabs button

Author:
gmer33

2 years ago

15.6k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

20.1k
Confirm and cancel buttons

Author:
Samuel Dawson

2 years ago

15.6k
Playstore Button
Download on the play store button

Author:
Arya

3 years ago

14.3k
Dioganal cuts Buttons

Author:
Adulik

2 years ago

6.8k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

1 month ago

99
IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
Toggle button

Author:
Matthew Chen

2 years ago

12.4k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

4 months ago

310
Sign in with GitHub Button

Author:
Conan Hilton

3 years ago

15.9k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

1 year ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1