Component Library
Browse and explore components
Textarea
A Textarea is a UI component that allows users to enter and edit multi-line text.
Basic Textarea
Component Code
Copy Code
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
Label With Textarea
Component Code
Copy Code
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
Discription With Textarea
Add any extra information about your event here.
Component Code
Copy Code
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
Disabled Textarea
Add any extra information about your event here.
Component Code
Copy Code
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