Toggle Components - TailwindCSS

1. Basic Toggle Switch

Simple toggle switch with smooth animation and state management.

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

<template>
  <!-- Basic Toggle Switch -->
  <label class="flex items-center cursor-pointer">
    <div class="relative">
      <input type="checkbox" v-model="isOn" class="sr-only">
      <div class="block w-14 h-8 rounded-full" :class="isOn ? 'bg-purple-600' : 'bg-gray-300'"></div>
      <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300" :class="isOn ? 'translate-x-6' : 'translate-x-0'"></div>
    </div>
    <div class="ml-3 text-gray-700 font-medium">
      <span>{{ isOn ? 'ON' : 'OFF' }}</span>
    </div>
  </label>
</template>

<script setup>
import { ref } from 'vue'
const isOn = ref(false)
</script>

import React, { useState } from 'react'

export default function BasicToggleSwitch() {
  const [isOn, setIsOn] = useState(false)

  return (
    <label className="flex items-center cursor-pointer">
      <div className="relative">
        <input
          type="checkbox"
          checked={isOn}
          onChange={() => setIsOn(!isOn)}
          className="sr-only"
        />
        <div className={`block w-14 h-8 rounded-full ${isOn ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
        <div className={`dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300 ${isOn ? 'translate-x-6' : 'translate-x-0'}`}></div>
      </div>
      <div className="ml-3 text-gray-700 font-medium">
        {isOn ? 'ON' : 'OFF'}
      </div>
    </label>
  );
}

2. Toggle with Label and Description

Toggle switch with descriptive label and additional information.

Email Notifications

Receive notifications via email

<!-- Toggle with Label and Description -->
<div class="flex items-center justify-between max-w-md">
  <div class="flex-1">
    <h3 class="text-sm font-medium text-gray-900">Email Notifications</h3>
    <p class="text-sm text-gray-500">Receive notifications via email</p>
  </div>
  <label class="flex items-center cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only">
      <div class="block bg-gray-300 w-14 h-8 rounded-full"></div>
      <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300"></div>
    </div>
  </label>
</div>

<template>
  <!-- Toggle with Label and Description -->
  <div class="flex items-center justify-between max-w-md">
    <div class="flex-1">
      <h3 class="text-sm font-medium text-gray-900">Email Notifications</h3>
      <p class="text-sm text-gray-500">Receive notifications via email</p>
    </div>
    <label class="flex items-center cursor-pointer">
      <div class="relative">
        <input type="checkbox" v-model="notifications" class="sr-only">
        <div class="block w-14 h-8 rounded-full" :class="notifications ? 'bg-purple-600' : 'bg-gray-300'"></div>
        <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300" :class="notifications ? 'translate-x-6' : 'translate-x-0'"></div>
      </div>
    </label>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const notifications = ref(true)
</script>

import React, { useState } from 'react'

export default function ToggleWithLabel() {
  const [notifications, setNotifications] = useState(true)

  return (
    <div className="flex items-center justify-between max-w-md">
      <div className="flex-1">
        <h3 className="text-sm font-medium text-gray-900">Email Notifications</h3>
        <p className="text-sm text-gray-500">Receive notifications via email</p>
      </div>
      <label className="flex items-center cursor-pointer">
        <div className="relative">
          <input
            type="checkbox"
            checked={notifications}
            onChange={() => setNotifications(!notifications)}
            className="sr-only"
          />
          <div className={`block w-14 h-8 rounded-full ${notifications ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
          <div className={`dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300 ${notifications ? 'translate-x-6' : 'translate-x-0'}`}></div>
        </div>
      </label>
    </div>
  );
}

3. Animated Toggle with Icon

Toggle switch with animated icons and enhanced visual feedback.

<!-- Animated Toggle with Icon -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only">
    <div class="block bg-gray-300 w-16 h-9 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition-transform duration-300 flex items-center justify-center">
      <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
      </svg>
    </div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">
    Toggle
  </div>
</label>

<template>
  <!-- Animated Toggle with Icon -->
  <label class="flex items-center cursor-pointer">
    <div class="relative">
      <input type="checkbox" v-model="darkMode" class="sr-only">
      <div class="block w-16 h-9 rounded-full" :class="darkMode ? 'bg-purple-600' : 'bg-gray-300'"></div>
      <div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition-transform duration-300 flex items-center justify-center" :class="darkMode ? 'translate-x-7' : 'translate-x-0'">
        <svg v-show="!darkMode" class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
        </svg>
        <svg v-show="darkMode" class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 20 20">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
        </svg>
      </div>
    </div>
    <div class="ml-3 text-gray-700 font-medium">
      <span>{{ darkMode ? 'Dark Mode' : 'Light Mode' }}</span>
    </div>
  </label>
</template>

<script setup>
import { ref } from 'vue'
const darkMode = ref(false)
</script>

import React, { useState } from 'react'

export default function AnimatedToggleWithIcon() {
  const [darkMode, setDarkMode] = useState(false)

  return (
    <label className="flex items-center cursor-pointer">
      <div className="relative">
        <input
          type="checkbox"
          checked={darkMode}
          onChange={() => setDarkMode(!darkMode)}
          className="sr-only"
        />
        <div className={`block w-16 h-9 rounded-full ${darkMode ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
        <div className={`dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition-transform duration-300 flex items-center justify-center ${darkMode ? 'translate-x-7' : 'translate-x-0'}`}>
          {!darkMode ? (
            <svg className="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
            </svg>
          ) : (
            <svg className="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 20 20">
              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
            </svg>
          )}
        </div>
      </div>
      <div className="ml-3 text-gray-700 font-medium">
        {darkMode ? 'Dark Mode' : 'Light Mode'}
      </div>
    </label>
  );
}

4. Toggle with Custom Colors

Toggle switch with customizable colors for different themes or states.

<!-- Toggle with Custom Colors -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only">
    <div class="block bg-red-300 w-14 h-8 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300"></div>
  </div>
  <div class="ml-3 text-gray-700 font-medium">
    Toggle
  </div>
</label>

<template>
  <!-- Toggle with Custom Colors -->
  <label class="flex items-center cursor-pointer">
    <div class="relative">
      <input type="checkbox" v-model="isActive" class="sr-only">
      <div class="block w-14 h-8 rounded-full" :class="isActive ? 'bg-green-500' : 'bg-red-300'"></div>
      <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300" :class="isActive ? 'translate-x-6' : 'translate-x-0'"></div>
    </div>
    <div class="ml-3 text-gray-700 font-medium">
      <span>{{ isActive ? 'Enabled' : 'Disabled' }}</span>
    </div>
  </label>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
</script>

import React, { useState } from 'react'

export default function ToggleWithCustomColors() {
  const [isActive, setIsActive] = useState(false)

  return (
    <label className="flex items-center cursor-pointer">
      <div className="relative">
        <input
          type="checkbox"
          checked={isActive}
          onChange={() => setIsActive(!isActive)}
          className="sr-only"
        />
        <div className={`block w-14 h-8 rounded-full ${isActive ? 'bg-green-500' : 'bg-red-300'}`}></div>
        <div className={`dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300 ${isActive ? 'translate-x-6' : 'translate-x-0'}`}></div>
      </div>
      <div className="ml-3 text-gray-700 font-medium">
        {isActive ? 'Enabled' : 'Disabled'}
      </div>
    </label>
  );
}

5. Toggle with Size Variations

Toggle switches in different sizes for various UI contexts.

Small

Medium

Large

<!-- Toggle with Size Variations -->
<!-- Small -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only">
    <div class="block bg-gray-300 w-10 h-6 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300"></div>
  </div>
</label>

<!-- Medium -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only">
    <div class="block bg-gray-300 w-14 h-8 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300"></div>
  </div>
</label>

<!-- Large -->
<label class="flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only">
    <div class="block bg-gray-300 w-20 h-10 rounded-full"></div>
    <div class="dot absolute left-1 top-1 bg-white w-8 h-8 rounded-full transition-transform duration-300"></div>
  </div>
</label>

<template>
  <!-- Toggle with Size Variations -->
  <div class="flex flex-col items-center space-y-6">
    <!-- Small -->
    <div class="flex items-center">
      <label class="flex items-center cursor-pointer">
        <div class="relative">
          <input type="checkbox" v-model="smallToggle" class="sr-only">
          <div class="block w-10 h-6 rounded-full" :class="smallToggle ? 'bg-purple-600' : 'bg-gray-300'"></div>
          <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300" :class="smallToggle ? 'translate-x-4' : 'translate-x-0'"></div>
        </div>
      </label>
      <span class="ml-3 text-sm text-gray-700">Small</span>
    </div>

    <!-- Medium -->
    <div class="flex items-center">
      <label class="flex items-center cursor-pointer">
        <div class="relative">
          <input type="checkbox" v-model="mediumToggle" class="sr-only">
          <div class="block w-14 h-8 rounded-full" :class="mediumToggle ? 'bg-purple-600' : 'bg-gray-300'"></div>
          <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300" :class="mediumToggle ? 'translate-x-6' : 'translate-x-0'"></div>
        </div>
      </label>
      <span class="ml-3 text-gray-700">Medium</span>
    </div>

    <!-- Large -->
    <div class="flex items-center">
      <label class="flex items-center cursor-pointer">
        <div class="relative">
          <input type="checkbox" v-model="largeToggle" class="sr-only">
          <div class="block w-20 h-10 rounded-full" :class="largeToggle ? 'bg-purple-600' : 'bg-gray-300'"></div>
          <div class="dot absolute left-1 top-1 bg-white w-8 h-8 rounded-full transition-transform duration-300" :class="largeToggle ? 'translate-x-10' : 'translate-x-0'"></div>
        </div>
      </label>
      <span class="ml-3 text-lg text-gray-700">Large</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const smallToggle = ref(false)
const mediumToggle = ref(false)
const largeToggle = ref(false)
</script>

import React, { useState } from 'react'

export default function ToggleWithSizeVariations() {
  const [smallToggle, setSmallToggle] = useState(false)
  const [mediumToggle, setMediumToggle] = useState(false)
  const [largeToggle, setLargeToggle] = useState(false)

  return (
    <div className="flex flex-col items-center space-y-6">
      <!-- Small -->
      <div className="flex items-center">
        <label className="flex items-center cursor-pointer">
          <div className="relative">
            <input
              type="checkbox"
              checked={smallToggle}
              onChange={() => setSmallToggle(!smallToggle)}
              className="sr-only"
            />
            <div className={`block w-10 h-6 rounded-full ${smallToggle ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
            <div className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 ${smallToggle ? 'translate-x-4' : 'translate-x-0'}`}></div>
          </div>
        </label>
        <span className="ml-3 text-sm text-gray-700">Small</span>
      </div>

      <!-- Medium -->
      <div className="flex items-center">
        <label className="flex items-center cursor-pointer">
          <div className="relative">
            <input
              type="checkbox"
              checked={mediumToggle}
              onChange={() => setMediumToggle(!mediumToggle)}
              className="sr-only"
            />
            <div className={`block w-14 h-8 rounded-full ${mediumToggle ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
            <div className={`dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300 ${mediumToggle ? 'translate-x-6' : 'translate-x-0'}`}></div>
          </div>
        </label>
        <span className="ml-3 text-gray-700">Medium</span>
      </div>

      <!-- Large -->
      <div className="flex items-center">
        <label className="flex items-center cursor-pointer">
          <div className="relative">
            <input
              type="checkbox"
              checked={largeToggle}
              onChange={() => setLargeToggle(!largeToggle)}
              className="sr-only"
            />
            <div className={`block w-20 h-10 rounded-full ${largeToggle ? 'bg-purple-600' : 'bg-gray-300'}`}></div>
            <div className={`dot absolute left-1 top-1 bg-white w-8 h-8 rounded-full transition-transform duration-300 ${largeToggle ? 'translate-x-10' : 'translate-x-0'}`}></div>
          </div>
        </label>
        <span className="ml-3 text-lg text-gray-700">Large</span>
      </div>
    </div>
  );
}