Text Area
多行输入框
A text field that wraps onto multiple lines, for content that runs longer than a sentence.
Live Demo
Actually clickableWhat you just saw:Comment boxes, message-board composers, the body editor in a notes app, the issue description field on GitHub — all Text Areas.
What it actually is
The only real difference between a Text Area and a Text Field is that its height can change, so it can hold a paragraph. The key design point: never ship a short default height — a box that is two lines tall tells the user two lines is all the room they get.
Anatomy · What it's made of
Container容器
Resizable height, min-height 96px
Placeholder占位文字
Use a realistic example sentence
Resize Handle缩放手柄
Draggable from the bottom-right corner on the web
Counter字数统计
Shows "128 / 500" in the bottom-right corner
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The input is paragraph-length (a comment, a note, a description) | Yes |
| You cannot predict how much the user wants to write | Yes |
| The content needs a formatted preview (Markdown) | Yes |
| The answer is a single character (e.g. a verification code) | No |
A 2-row default discourages people who write long — start at 4–6 rows and support auto-grow.
On mobile it fights the on-screen keyboard, so leave room for scrolling.
Similar Patterns
Don't mix these upText AreaCurrent
多行输入框
A text field that wraps onto multiple lines, for content that runs longer than a sentence.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
In one line:A text field that wraps onto multiple lines, for content that runs longer than a sentence.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Search Field
搜索框
An input box built purely for finding things, usually with a magnifier icon and a clear button.
Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a comment box: 4 rows tall at minimum, grows automatically with the content, a "0 / 300" character counter in the bottom-right corner, and action buttons revealed on focus.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a slightly bigger text field.
Say this instead
Add a multi-line Text Area: min-height of 4 rows + auto-grow (capped at 320px), a "0 / 300" character counter in the bottom-right corner that changes color as you approach the limit.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.