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