Forms
Textarea
Multi-line text that grows with its content (field-sizing: content), filled like the input.
packages/design-system/components/ui/textarea.tsx
Examples
A few lines is plenty.
Anatomy
- 01Filled box, rounded-2xl
- 02Grows with content
- 03Focus ring
Usage
import { Textarea } from "@repo/design-system/components/ui/textarea";
<Textarea id="brief" placeholder="Tell us about the project" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ...props | ComponentProps<"textarea"> | none | Any textarea attribute. rows is ignored while field-sizing is content; min-h-16 is the floor. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Use it for anything longer than a sentence.
Don't
- Set a fixed height; let it grow.