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

449

1

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

10k
Switch tabs button

Author:
gmer33

2 years ago

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

Author:
Nishant Trivedi

1 year ago

18.2k
Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

5.2k
Disabled Button & Active Button

Author:
Dipti narayan

1 year ago

34.4k
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

2 years ago

13.1k
Beautiful animated button
on hover effect

Author:
Dika Rahman

1 year ago

4.2k
Primary secondary button pair

Author:
Iris Callahan

5 months ago

601
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

1 month ago

256
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

2 years ago

11.6k
File Input
File Input

Author:
Aman kumar

9 months ago

2.1k
CTA gradient button

Author:
Anonymous

9 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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