
import { Textarea } from '@headlessui/react'
const BasicTextareaCode = () => {
  return (
    <>
      <div>
        <Textarea
          name='description'
          className='ui-form-control rounded-lg'
          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'
            rows={4}></Textarea>
        </Field>
      </div>
    </>
  )
}
export default WithLabelCode
Add any extra information about your event here.
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'
            rows={6}></Textarea>
        </Field>
      </div>
    </>
  )
}
export default WithDescriptionTextareaCode
Add any extra information about your event here.
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-dark'
            rows={6}></Textarea>
        </Field>
      </div>
    </>
  )
}
export default DisableTextAreaCode