Textarea
Inset-first multi-line fields for calm layouts, with optional shadow variants when the textarea is the focal object.
Basic Usage
Default textarea is variant="inset" (Level 1).
Variants
Use inset for nested surfaces, default for a subtle standalone field, and elevated only for hero moments.
Inset (Level 1)
Default (Level 3)
Elevated (Hero)
Sizes
States
Description must be at least 50 characters long.
0/280
Best Practices
In cards/panels, keep the textarea inset and use flat buttons to preserve the elevation budget.
Feedback
Nested in Card → textarea stays inset, action uses flat variants.
Standalone Post
Standalone → start with variant="default".
Auto-saved just now
Resize Options
Anti-patterns
Avoid double-elevation: don't place elevated textareas inside elevated containers.
❌ Wrong: Elevated inside Card
✅ Correct: Inset inside Card