Tailwind CSS home page
  1. INPUTS
  2. Switch

​
Basic usage

​
Basic Switch

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
Disabled Switch

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
Color Switch

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
Switch with label

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
Switch with Icon

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Choice Best</label>
<select id="countries" class="bg-gray-100 text-gray-700 dark:text-gray-300 dark:bg-slate-900 bg-opacity-20 w-fit py-1 px-3 border border-gray-300 text-sm rounded-lg focus:outline-none">
    <option selected class="text-gray-700 dark:text-gray-300 hover:bg-green-300">React js</option>
    <option value="Vue" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vue js</option>
    <option value="Next" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Next js</option>
    <option value="Nuxt" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Nuxt js</option>
    <option value="Vw" class="text-gray-700 dark:text-gray-300 hover:bg-green-300">Vw js</option>
</select>

​
Conditionery Switch Icon

IconSwitch.js
import { useState } from 'react'
import { SunIcon, MoonIcon } from '@vwjs/icons'

export function IconSwitch() {
const [clicked, setClicked] = useState(false)
return (
  <div className="flex border border-black/5 dark:border-white/5 flex-row gap-2 p-4 not-prose relative bg-slate-50 rounded-xl overflow-hidden dark:bg-slate-800/25">
    <label className="inline-flex items-center space-x-4 cursor-pointer dark:text-gray-100">
      <span className="relative">
        <input id="Toggle1" type="checkbox" className="hidden peer" />
        <div
          onClick={() => setClicked(!clicked)}
          className="w-10 h-6 rounded-full shadow bg-opacity-20 bg-blue-400 bg-opacity-25"
        ></div>
        <div
          onClick={() => setClicked(!clicked)}
          className="absolute inset-y-0 left-0 flex justify-center items-center w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto bg-transparent"
        >
          {clicked ? (
            <MoonIcon className="h-5 w-5" />
          ) : (
            <SunIcon className="h-5 w-5" />
          )}
        </div>
      </span>
    </label>
  </div>
)
}

​
usage