Toggle Switch in React JS with Tailwind CSS Example

In this tutorial, we will create toggle switch in react js with tailwind css. We will see simple toggle switch react, toggle switch headless ui examples with Tailwind CSS & React.

Tool Use

React JS

Tailwind CSS 3.v

Headless UI

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

Build a toggle switch input with react hooks and tailwind css v3.

Toggle.jsx

import { useState } from "react";

export default function Toggle() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div className="relative flex flex-col items-center justify-center min-h-screen overflow-hidden">
            <div className="flex">
                <label class="inline-flex relative items-center mr-5 cursor-pointer">
                    <input
                        type="checkbox"
                        className="sr-only peer"
                        checked={enabled}
                        readOnly
                    />
                    <div
                        onClick={() => {
                            setEnabled(!enabled);
                        }}
                        className="w-11 h-6 bg-gray-200 rounded-full peer  peer-focus:ring-green-300  peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"
                    ></div>
                    <span className="ml-2 text-sm font-medium text-gray-900">
                        ON
                    </span>
                </label>
            </div>
        </div>
    );
}

react tailwind toggle off

react tailwind toggle switch on

Example 2

Create a toggle switch input with react and tailwind css v3 and Headless ui.

To get started, install Headless UI via npm:

npm install @headlessui/react

Toggle.jsx

import { useState } from 'react'
import { Switch } from '@headlessui/react'

export default function Toggle() {
  const [enabled, setEnabled] = useState(false)

  return (
    <div className="grid h-screen place-items-center">
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${enabled ? 'bg-teal-900' : 'bg-teal-700'}
          relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
      >
        <span className="sr-only">Use setting</span>
        <span
          aria-hidden="true"
          className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
            pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
        />
      </Switch>
    </div>
  )
}

headless ui react toggle

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example