Component · Inputs · 07
Textarea
Textarea = a multi-line input with a fixed row count, vertical resize, and a counter that warns near the limit.
What is a Textarea?
A textarea collects sentences. Name the rows, the resize axis, and what the counter does near the limit.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- The text that names a field; keep it short and place it above the input.
- A control that cannot be interacted with; show it dimmed and non-focusable.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- The keyboard-focused state — a visible ring or border change. Never remove it.
- The invalid state — red border, message, and usually a blocked submit.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Label
- 02 Field
- 03 Resize handle
- 04 Helper text
- 05 Counter
When to use
- Support messages and bug reports
- Prompt and note fields that hold paragraphs
- Profile bios with a visible character budget
Avoid when
- The answer fits one line — use Input
- The text needs formatting — use a rich text editor
- The limit is invisible and errors on submit
Lock the horizontal axis — a sideways-resized textarea breaks every layout it lands in.
See also
Create a textarea component.
STYLE
- 4 rows tall, 12px radius, 14px #1D1D1F text on #FFFFFF
- 1px #C7C7CC border, focus swaps it for a 2px #0071E3 ring
- resize vertical only, with a visible handle in the bottom-right
- helper text 12px #6E6E73 under the field
STATES
- default, focus, error with #FF3B30 border and message, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui