[ [UI.04] Components ] Textarea

Textarea

> A multi-line text input for longer content.

Import

[ [0x5B] IMPORT ]

1import { Textarea } from "@/components/ui/textarea"

Preview

[ [0x00] TEXTAREA ]

1<Textarea placeholder="Type your message here..." />

Variants

[ [0x00] DEFAULT ]

1<Textarea placeholder="Write something..." />

[ [0x00] WITH LABEL ]

[MESSAGE]:

1<div className="grid gap-2">
2  <Label htmlFor="message">[MESSAGE]:</Label>
3  <Textarea id="message" placeholder="Type your message here" />
4</div>

[ [0x00] DISABLED ]

1<Textarea disabled placeholder="Disabled textarea" />

[ [0x00] ERROR STATE ]

1<Textarea error placeholder="Invalid content" />

[ [0x00] WITH DEFAULT VALUE ]

1<Textarea
2  defaultValue="This is some default text that appears in the textarea when it first renders."
3/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
error	`boolean`	`false`	Show error styling with red border.
disabled	`boolean`	`false`	Disable the textarea.
rows	`number`	-	Number of visible text lines.

Accessibility

[ [0x58] A11Y ]

Uses native <textarea> element for full keyboard support
Supports aria-invalid for error states
Focus visible styles for keyboard navigation

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Textarea when:

• User needs to enter multi-line text (comments, descriptions, messages)
• Text input exceeds one sentence (feedback, bio, notes)
• Content should be visible while typing (no scrolling needed)
• You need a specific number of visible rows (e.g., 4-6 lines for comments)

✗ Don't use when:

• Single-line input expected (use Input instead)
• Structured data entry (use Input with proper type attribute)
• Rich text formatting needed (use rich text editor like Tiptap)
• Code input needed (use code editor component with syntax highlighting)

Best Practices:

• Set appropriate rows prop (4-6 for comments, 8-10 for longer content)
• Provide clear placeholder text with example format
• Consider character counter for limited-length fields
• Use error state to show validation issues inline
• Allow resize for longer content unless fixed height required

Variants

[ [0x00] DEFAULT ]

1<Textarea placeholder="Write something..." />

[ [0x00] WITH LABEL ]

[MESSAGE]:

1<div className="grid gap-2">
2  <Label htmlFor="message">[MESSAGE]:</Label>
3  <Textarea id="message" placeholder="Type your message here" />
4</div>

[ [0x00] DISABLED ]

1<Textarea disabled placeholder="Disabled textarea" />

[ [0x00] ERROR STATE ]

1<Textarea error placeholder="Invalid content" />

[ [0x00] WITH DEFAULT VALUE ]

1<Textarea
2  defaultValue="This is some default text that appears in the textarea when it first renders."
3/>

Prop

Type

Default

Description

error

boolean

false

Show error styling with red border.

disabled

boolean

false

Disable the textarea.

rows

number

Number of visible text lines.