Textarea
A styled multi-line text input with smooth focus transitions and shadow effects.
Basic
With label
With character count
Up to 160 characters.
Error state
Feedback is required.
Disabled
Installation
pnpm
pnpm dlx @hex-core/cli add textareaWith label
Textarea paired with a label
tsx
<div className="grid gap-1.5">
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Type your message..." />
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Placeholder text |
rows | number | 3 | Number of visible text rows |
disabled | boolean | false | Disable the textarea |
value | string | — | Controlled textarea value |
defaultValue | string | — | Default value for uncontrolled usage |
onChange | function | — | Change handler: (e: ChangeEvent<HTMLTextAreaElement>) => void |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use for multi-line text input: comments, descriptions, messages, notes. Always pair with a Label.
When not to use
Don't use for single-line input (use Input). Don't use for rich text editing.
Common mistakes
- Missing associated Label
- Not setting a reasonable min-height or rows
Accessibility
Always pair with a Label using htmlFor/id. Consider aria-describedby for character limits.
Token budget: 250