CODEWITHSUNDEEP
reactjstailwind-cssheadless-ui
Daryl Wong
Daryl Wong

Reputation: 2443

Tailwind HeadlessUI toggle switch with label in between

Based on the toggle switch in the headlessui, I have like to place a text in between the switch. I came out with something like below but the text simply follow the inner rounded button. Is there a way that I can place the text(enable/disable) on the left or right hand side of the inner button?

https://headlessui.dev/react/switch

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

const App = () => {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch.Group>
      <div className='flex items-center'>
        <Switch
          checked={enabled}
          onChange={setEnabled}
          className={`${
            enabled ? 'bg-blue-600' : 'bg-gray-200'
          } relative inline-flex items-center h-12 rounded-full w-48 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
        >
          <span
            className={`${
              enabled ? 'translate-x-32' : 'translate-x-1'
            } inline-block w-12 h-11 transform bg-white rounded-full transition-transform`}
          >
            {enabled ? 'Enable' : 'Disable'}
          </span>
        </Switch>
      </div>
    </Switch.Group>
  )
}

export default App

Upvotes: 1

Views: 3088

Answers (1)

Dhaifallah
Dhaifallah

Reputation: 1855

You could give the span absolute class then replace translate-x-32 with left-0 and translate-x-1 with right-0

then add another span for the text and then add flex justify-center items-center to the Switch to justify the text in the center look here

Upvotes: 0

Related Questions