Textarea

Multi-line text input with auto-resize support.

formtextmultiline

Import

import { Textarea } from "@/components/ui";

Basic Usage

Textarea Preview

0/200

Code

tsx

<Textarea placeholder="Enter your message..." />

With Label

Using FieldWrapper for form layout

1<FieldWrapper label="Description" description="Provide a detailed description">
2  <Textarea placeholder="Write your description here..." rows={4} />
3</FieldWrapper>

Resize Options

Control resize behavior

1<div className="space-y-4">
2  <Textarea resize="none" placeholder="No resize" />
3  <Textarea resize="vertical" placeholder="Vertical resize (default)" />
4  <Textarea resize="horizontal" placeholder="Horizontal resize" />
5  <Textarea resize="both" placeholder="Both directions" />
6</div>

Error State

Show validation error

1<FieldWrapper label="Bio" error="Bio must be at least 50 characters">
2  <Textarea error placeholder="Tell us about yourself..." />
3</FieldWrapper>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring