import { Select } from '@headlessui/react'

const BasicSelectCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Select
          name='status'
          aria-label='Project status'
          className='ui-form-control rounded-md my-4 !p-2 dark:focus:bg-dark hover:cursor-pointer'>
          <option value='active'>Active</option>
          <option value='paused'>Paused</option>
          <option value='delayed'>Delayed</option>
          <option value='canceled'>Canceled</option>
        </Select>
      </div>
    </>
  )
}

export default BasicSelectCode

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

const WithLabelSelectCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Field>
          <Label className='text-ld mb-2 block'>Project status</Label>
          <Select
            name='status'
            aria-label='Project status'
            className='ui-form-control rounded-md !p-2 dark:focus:bg-dark hover:cursor-pointer'>
            <option value='active'>Active</option>
            <option value='paused'>Paused</option>
            <option value='delayed'>Delayed</option>
            <option value='canceled'>Canceled</option>
          </Select>
        </Field>
      </div>
    </>
  )
}

export default WithLabelSelectCode

import { Description, Field, Label, Select } from '@headlessui/react'

const WithDescriptionSelectCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Field>
          <Label className='text-ld mb-1 block'>Project status</Label>
          <Description className='mb-2 text-xs'>
            This will be visible to clients on the project.
          </Description>
          <Select
            name='status'
            aria-label='Project status'
            className='ui-form-control rounded-md !p-2 dark:focus:bg-dark hover:cursor-pointer'>
            <option value='active'>Active</option>
            <option value='paused'>Paused</option>
            <option value='delayed'>Delayed</option>
            <option value='canceled'>Canceled</option>
          </Select>
        </Field>
      </div>
    </>
  )
}

export default WithDescriptionSelectCode

import { Description, Field, Label, Select } from '@headlessui/react'

const DisableSelectCode = () => {
  return (
    <>
      <div className='max-w-sm'>
        <Field disabled>
          <Label className='text-ld mb-1 block data-[disabled]:opacity-50'>
            Project status
          </Label>
          <Description className='mb-2 text-darklink text-xs data-[disabled]:opacity-50'>
            This will be visible to clients on the project.
          </Description>
          <Select
            name='status'
            aria-label='Project status'
            className='ui-form-control rounded-md data-[disabled]:opacity-50 !p-2'>
            <option value='active'>Active</option>
            <option value='paused'>Paused</option>
            <option value='delayed'>Delayed</option>
            <option value='canceled'>Canceled</option>
          </Select>
        </Field>
      </div>
    </>
  )
}

export default DisableSelectCode