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-md bg-gray-200 transition data-[checked]:bg-primary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-secondary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-success'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-error'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-warning'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-info'>
          <span className='size-4 translate-x-1 rounded-md bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default BasicSwitchCode

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-md bg-gray-200 transition data-[checked]:bg-primary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-secondary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-success'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-error'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-warning'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-info'>
          <span className='size-4 translate-x-1 rounded-md bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default DefaultOnCode

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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md 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-md bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </Field>
    </div>
  )
}

export default DisableSwitchesCode

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-md bg-gray-200 transition data-[checked]:bg-primary'>
            <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-secondary'>
            <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-error'>
            <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-warning'>
            <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-info'>
            <span className='size-4 translate-x-1 rounded-md bg-white transition group-data-[checked]:translate-x-6' />
          </Switch>
        </Field>
      </div>
    </div>
  )
}

export default WithLabelSwitchCode

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-md bg-gray-200 transition duration-700 data-[checked]:bg-primary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition duration-700 data-[checked]:bg-secondary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition duration-700 data-[checked]:bg-success'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition duration-700 data-[checked]:bg-error'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition duration-700 data-[checked]:bg-warning'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition duration-700 data-[checked]:bg-info'>
          <span className='size-4 translate-x-1 rounded-md bg-white transition duration-700 group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default WithTransitionCode

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-md bg-gray-200 transition data-[checked]:bg-primary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-secondary'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-success'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-error'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-warning'>
          <span className='size-4 translate-x-1 rounded-md 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-md bg-gray-200 transition data-[checked]:bg-info'>
          <span className='size-4 translate-x-1 rounded-md bg-white transition group-data-[checked]:translate-x-6' />
        </Switch>
      </div>
    </div>
  )
}

export default RenderAsElements