Tailwind CSS Toggle Switch Examples

In this tutorial, we will see toggle switch, toggle button, rounded circle toggle switch, on off toggle switch, examples with Tailwind CSS & Alpine Js.


Tool Use

Tailwind CSS 2.x

Alpine js 3.x


Example 1

Tailwind CSS Simple Toggle with Alpine js 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Simple Toggle Switch</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div class="flex justify-center mt-8" x-data="{ toggle: '0' }">
      <div
        class="relative w-12 h-6 transition duration-200 ease-linear rounded"
        :class="[toggle === '1' ? 'bg-green-400' : 'bg-gray-400']"
      >
        <label
          for="toggle"
          class="
            absolute
            left-0
            w-6
            h-6
            mb-2
            transition
            duration-100
            ease-linear
            transform
            bg-white
            border-2
            rounded
            cursor-pointer
          "
          :class="[toggle === '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"
        ></label>
        <input
          type="checkbox"
          id="toggle"
          name="toggle"
          class="w-full h-full appearance-none focus:outline-none"
          @click="toggle === '0' ? toggle = '1' : toggle = '0'"
        />
      </div>
    </div>
  </body>
</html>


Example 2

Tailwind CSS Rounded Circle Toggle with Alpine js 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Circle Toggle Switch</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div class="flex justify-center mt-8" x-data="{ toggle: '0' }">
      <div
        class="
          relative
          w-12
          h-6
          transition
          duration-200
          ease-linear
          rounded-full
        "
        :class="[toggle === '1' ? 'bg-green-400' : 'bg-gray-400']"
      >
        <label
          for="toggle"
          class="
            absolute
            left-0
            w-6
            h-6
            mb-2
            transition
            duration-100
            ease-linear
            transform
            bg-white
            border-2
            rounded-full
            cursor-pointer
          "
          :class="[toggle === '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"
        ></label>
        <input
          type="checkbox"
          id="toggle"
          name="toggle"
          class="w-full h-full appearance-none focus:outline-none"
          @click="toggle === '0' ? toggle = '1' : toggle = '0'"
        />
      </div>
    </div>
  </body>
</html>



Example 3

Tailwind CSS Rounded On Off Hint Toggle with Alpine js 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS On Off Hints Toggle Switch</title>
    <link
      href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="{toggle: false}">
      <div class="flex items-center justify-center mt-8">
        <div class="mr-3 text-sm">Off</div>
        <div
          class="
            relative
            w-12
            h-6
            transition
            duration-200
            ease-linear
            rounded-full
          "
          :class="[toggle ? 'bg-green-800' : 'bg-gray-300']"
        >
          <label
            for="toggle"
            class="
              absolute
              left-0
              w-6
              h-6
              transition
              duration-100
              ease-linear
              transform
              bg-gray-100
              rounded-full
              cursor-pointer
            "
            :class="[toggle ? 'translate-x-full border-gray-400' : 'translate-x-0 border-green-400']"
          >
          </label>

          <input
            type="checkbox"
            id="toggle"
            name="toggle"
            x-model="toggle"
            class="w-full h-full appearance-none focus:outline-none"
          />
        </div>
        <div class="ml-3 text-sm">On</div>
      </div>
    </div>

    <!-- end snippet -->
  </body>
</html>