Tailwind Admin Template

Component Library

Browse and explore components

Switch

A Switch is a UI component that toggles between two states, such as on and off.

Basic Switches

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

const BasicSwitchCode = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(false)
  const [enabledSwith2, setEnabledSwitch2] = useState(false)
  const [enabledSwith3, setEnabledSwitch3] = useState(false)
  const [enabledSwith4, setEnabledSwitch4] = useState(false)
  const [enabledSwith5, setEnabledSwitch5] = useState(false)
  const [enabledSwith6, setEnabledSwitch6] = useState(false)

  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Switch
          checked={enabledSwith1}
          onChange={setEnabledSwitch1}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-primary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith2}
          onChange={setEnabledSwitch2}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-secondary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith3}
          onChange={setEnabledSwitch3}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-success hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith4}
          onChange={setEnabledSwitch4}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-error hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith5}
          onChange={setEnabledSwitch5}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-warning hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith6}
          onChange={setEnabledSwitch6}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-info hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default BasicSwitchCode

Default On Switches

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

const DefaultOnCode = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(true)
  const [enabledSwith2, setEnabledSwitch2] = useState(true)
  const [enabledSwith3, setEnabledSwitch3] = useState(true)
  const [enabledSwith4, setEnabledSwitch4] = useState(true)
  const [enabledSwith5, setEnabledSwitch5] = useState(true)
  const [enabledSwith6, setEnabledSwitch6] = useState(true)

  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Switch
          checked={enabledSwith1}
          onChange={setEnabledSwitch1}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-primary dark:data-[checked]:bg-primary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith2}
          onChange={setEnabledSwitch2}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-secondary dark:data-[checked]:bg-secondary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith3}
          onChange={setEnabledSwitch3}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-success dark:data-[checked]:bg-success hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith4}
          onChange={setEnabledSwitch4}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-error dark:data-[checked]:bg-error hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith5}
          onChange={setEnabledSwitch5}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-warning dark:data-[checked]:bg-warning hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith6}
          onChange={setEnabledSwitch6}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-info dark:data-[checked]:bg-info hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default DefaultOnCode

Disabled Switches

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

const DisableSwitchesCode = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(true)
  const [enabledSwith2, setEnabledSwitch2] = useState(true)
  const [enabledSwith3, setEnabledSwitch3] = useState(true)
  const [enabledSwith4, setEnabledSwitch4] = useState(true)
  const [enabledSwith5, setEnabledSwitch5] = useState(true)
  const [enabledSwith6, setEnabledSwitch6] = useState(true)

  return (
    <div>
      <Field className='flex flex-wrap gap-3' disabled>
        <Switch
          checked={enabledSwith1}
          onChange={setEnabledSwitch1}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-primary'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith2}
          onChange={setEnabledSwitch2}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-secondary'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith3}
          onChange={setEnabledSwitch3}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-success'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith4}
          onChange={setEnabledSwitch4}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-error'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith5}
          onChange={setEnabledSwitch5}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-warning'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith6}
          onChange={setEnabledSwitch6}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 transition data-[checked]:bg-info'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </Field>
    </div>
  )
}

export default DisableSwitchesCode

Adding a Label

Enable

import { useState } from 'react'
import { Switch, Field, Label } from '@headlessui/react'

const WithLabelSwitchCode = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(true)
  const [enabledSwith2, setEnabledSwitch2] = useState(true)
  const [enabledSwith3, setEnabledSwitch3] = useState(true)
  const [enabledSwith4, setEnabledSwitch4] = useState(true)
  const [enabledSwith5, setEnabledSwitch5] = useState(true)

  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Field>
          <Label className='block text-ld mb-2'>Enable</Label>
          <Switch
            checked={enabledSwith1}
            onChange={setEnabledSwitch1}
            className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-primary dark:data-[checked]:bg-primary hover:cursor-pointer'>
            <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
        <Field>
          <Label className='block text-ld mb-2'>Enable</Label>
          <Switch
            checked={enabledSwith2}
            onChange={setEnabledSwitch2}
            className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-secondary dark:data-[checked]:bg-secondary hover:cursor-pointer'>
            <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
        <Field>
          <Label className='block text-ld mb-2'>Enable</Label>
          <Switch
            checked={enabledSwith3}
            onChange={setEnabledSwitch3}
            className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-error dark:data-[checked]:bg-error hover:cursor-pointer'>
            <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
        <Field>
          <Label className='block text-ld mb-2'>Enable</Label>
          <Switch
            checked={enabledSwith4}
            onChange={setEnabledSwitch4}
            className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-warning dark:data-[checked]:bg-warning hover:cursor-pointer'>
            <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
        <Field>
          <Label className='block text-ld mb-2'>Enable</Label>
          <Switch
            checked={enabledSwith5}
            onChange={setEnabledSwitch5}
            className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-info dark:data-[checked]:bg-info hover:cursor-pointer'>
            <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
      </div>
    </div>
  )
}

export default WithLabelSwitchCode

Adding Transitions

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

const WithTransitionCode = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(true)
  const [enabledSwith2, setEnabledSwitch2] = useState(true)
  const [enabledSwith3, setEnabledSwitch3] = useState(true)
  const [enabledSwith4, setEnabledSwitch4] = useState(true)
  const [enabledSwith5, setEnabledSwitch5] = useState(true)
  const [enabledSwith6, setEnabledSwitch6] = useState(true)

  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Switch
          checked={enabledSwith1}
          onChange={setEnabledSwitch1}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-primary dark:data-[checked]:bg-primary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith2}
          onChange={setEnabledSwitch2}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-secondary dark:data-[checked]:bg-secondary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith3}
          onChange={setEnabledSwitch3}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-success dark:data-[checked]:bg-success hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith4}
          onChange={setEnabledSwitch4}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-error dark:data-[checked]:bg-error hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith5}
          onChange={setEnabledSwitch5}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-warning dark:data-[checked]:bg-warning hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          checked={enabledSwith6}
          onChange={setEnabledSwitch6}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition duration-700 data-[checked]:bg-info dark:data-[checked]:bg-info hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default WithTransitionCode

Rendering as Element

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

const RenderAsElements = () => {
  const [enabledSwith1, setEnabledSwitch1] = useState(false)
  const [enabledSwith2, setEnabledSwitch2] = useState(false)
  const [enabledSwith3, setEnabledSwitch3] = useState(false)
  const [enabledSwith4, setEnabledSwitch4] = useState(false)
  const [enabledSwith5, setEnabledSwitch5] = useState(false)
  const [enabledSwith6, setEnabledSwitch6] = useState(false)

  return (
    <div>
      <div className='flex flex-wrap gap-3'>
        <Switch
          as='div'
          checked={enabledSwith1}
          onChange={setEnabledSwitch1}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-primary dark:data-[checked]:bg-primary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          as='div'
          checked={enabledSwith2}
          onChange={setEnabledSwitch2}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-secondary dark:data-[checked]:bg-secondary hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          as='div'
          checked={enabledSwith3}
          onChange={setEnabledSwitch3}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-success dark:data-[checked]:bg-success hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          as='div'
          checked={enabledSwith4}
          onChange={setEnabledSwitch4}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-error dark:data-[checked]:bg-error hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          as='div'
          checked={enabledSwith5}
          onChange={setEnabledSwitch5}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-warning dark:data-[checked]:bg-warning hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
        <Switch
          as='div'
          checked={enabledSwith6}
          onChange={setEnabledSwitch6}
          className='group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition data-[checked]:bg-info dark:data-[checked]:bg-info hover:cursor-pointer'>
          <span className='size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default RenderAsElements

Component Library

FORMS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

CHARTS

Switch

Basic Switches

Component Code

Default On Switches

Component Code

Disabled Switches

Component Code

Adding a Label

Component Code

Adding Transitions

Component Code

Rendering as Element

Component Code