import { Textarea } from '@headlessui/react'

const BasicTextareaCode = () => {
  return (
    <>
      <div>
        <Textarea
          name='description'
          className='ui-form-control rounded-lg py-2.5 px-3'
          rows={6}></Textarea>
      </div>
    </>
  )
}

export default BasicTextareaCode

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

const WithLabelCode = () => {
  return (
    <>
      <div>
        <Field>
          <Label className='text-ld mb-2 block font-medium'>Description</Label>
          <Textarea
            name='description'
            className='ui-form-control rounded-lg py-2.5 px-3'
            rows={4}></Textarea>
        </Field>
      </div>
    </>
  )
}

export default WithLabelCode

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

const WithDescriptionTextareaCode = () => {
  return (
    <>
      <div>
        <Field>
          <Label className='text-ld mb-1 block font-medium'>Type Here</Label>
          <Description className='text-darklink text-xs mb-2'>
            Add any extra information about your event here.
          </Description>
          <Textarea
            name='description'
            className='ui-form-control rounded-lg py-2.5 px-3'
            rows={6}></Textarea>
        </Field>
      </div>
    </>
  )
}

export default WithDescriptionTextareaCode

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

const DisableTextAreaCode = () => {
  return (
    <>
      <div>
        <Field disabled>
          <Label className='text-ld mb-1 block font-medium data-[disabled]:opacity-50'>
            Type Here
          </Label>
          <Description className='text-darklink text-xs mb-2 data-[disabled]:opacity-50'>
            Add any extra information about your event here.
          </Description>
          <Textarea
            name='description'
            className='ui-form-control rounded-lg data-[disabled]:bg-gray-100 dark:data-[disabled]:bg-transparent'
            rows={6}></Textarea>
        </Field>
      </div>
    </>
  )
}

export default DisableTextAreaCode