CODEWITHSUNDEEP
next.jstailwind-csstailwind-ui
reallymemorable
reallymemorable

Reputation: 1024

Tailwind Switch not appearing

I I copy-pasted the direct switch example from TailwindUI.

Here is the source:

/* This example requires Tailwind CSS v2.0+ */
import { useState } from 'react'
import { Switch } from '@headlessui/react'

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

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

  return (
    <Switch.Group as="div" className="flex items-center justify-between">
      <span className="flex-grow flex flex-col">
        <Switch.Label as="span" className="text-sm font-medium text-gray-900" passive>
          Available to hire
        </Switch.Label>
        <Switch.Description as="span" className="text-sm text-gray-500">
          Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.
        </Switch.Description>
      </span>
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={classNames(
          enabled ? 'bg-indigo-600' : 'bg-gray-200',
          'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
        )}
      >
        <span
          aria-hidden="true"
          className={classNames(
            enabled ? 'translate-x-5' : 'translate-x-0',
            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
          )}
        />
      </Switch>
    </Switch.Group>
  )
}

This is how it's supposed to look: enter image description here

I implemented it like this:

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


function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

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

return (
        <Switch.Group as="div" className="flex items-center justify-between">
          <span className="flex-grow flex flex-col">
            <Switch.Label as="span" className="input-label" passive>
              This community is invite-only
            </Switch.Label>
            <Switch.Description as="span" className="input-description">
              Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.
            </Switch.Description>
          </span>
          <Switch
            checked={inviteOnly}
            onChange={() => setInviteOnly(!inviteOnly)}
            className={classNames(
              enabled ? 'bg-indigo-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
              )}
            />
          </Switch>
        </Switch.Group>

It displays WITHOUT the switch.

enter image description here

I have no idea what's going on. There are no errors thrown. When I inspect the page, the switch code is definitely getting sent to the browser.

Any ideas?

Upvotes: 1

Views: 552

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 25070

As far as I understand from your code, you are missing the declaration of inviteOnly variable

So when you say

  <Switch
        checked={inviteOnly}
   ...
   >

It is not able to figure out the instance of the variable inviteOnly.

I am not sure why it isn't showing any error. Add this line it should work.

const [inviteOnly, setInviteOnly]= useState(false)

Upvotes: 1

Related Questions