Textarea
多行输入框
Aliases:多行输入框文本域大输入框留言框备注框富文本输入区
What is it
A growing multi-line field for long text — bios, notes, messages and feedback. It grows manually or automatically, usually paired with a counter and submit button; the count turns red past the limit and content wraps instead of clipping.
Interactive playground
Try it. Make an informed choice.Enter several lines and inspect length and sizing behavior.
Loading lab…
What to look for
- 01Keep the label and length limit visible beyond the placeholder.
- 02Keep later actions reachable as the field grows.
✓ When to use
- Long-form text like bios, notes and messages
- Users need line breaks to structure content
- Character limits need a live counter
✕ When not to use
- Short single-line fields — an input is more compact
- Formatting like bold and headings — use a rich-text editor
- Structured data like key-value pairs — use dedicated controls
Variants
Fixed
固定高
Fixed rows scroll internally — stable layout
Autosize
自动增高
Grows with content — chat and comment boxes
With counter
带字数
Live counter bottom-right, red past the limit
Implementation
resizefield-sizing: contentmax-height: overflowcounter: lengthBase styling matches input but multi-line: a min-h starting point and resize-y for manual growth; autosize via field-sizing: content (or JS setting height from scrollHeight on input). The counter compares value.length against maxLength, turning red past the limit and blocking submit.
Platform API
<textarea>In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| HTML | <textarea> |
| shadcn/ui | Textarea |
| MUI | TextField multiline |
| AntD | Input.TextArea |
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed withThe text on the page is itself the editor: a click swaps it for an input in place, Enter or blur commits, Escape cancels — what you fix is what you see. It solves the overhead of a full edit page for tiny changes, driving the cost of a correction down to a single click, ideal for quick single-field revisions.
PatternsUsed withA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsSimilar