Text Area
多行输入框
WebMobileDesktop上手难度: 容易
一个能换行的输入框，用来写长一点的内容。
Live Demo
真的可以点支持换行0 / 300
你刚才看到的这个：评论框、留言板输入框、笔记 App 里的正文编辑区、GitHub 的 Issue 描述框——都是 Text Area。
它到底是什么
Text Area 和 Text Field 的区别只有一条：它的高度可变，能容纳段落。它的关键设计点是「不要只给一个默认矮框」——用户看到两行的高度，会以为只能写两行。
多行输入textareatext area长文本输入留言框
Anatomy · 它由什么组成
Container容器
高度可调，min-height 96px
Placeholder占位文字
给一个真实的示例句子
Resize Handle缩放手柄
Web 端右下角可拖拽
Counter字数统计
右下角显示「128 / 500」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 输入内容是段落级别（评论、备注、描述） | 用 |
| 不确定用户要写多长 | 用 |
| 需要显示格式预览（Markdown） | 用 |
| 只填 1 个字符（如验证码） | 不用 |
默认高度给 2 行会让长文作者望而却步——给 4–6 行并支持自动增长。
在移动端它会和键盘遮挡打架，记得预留滚动空间。
Similar Patterns
别搞混一句话区分：一个能换行的输入框，用来写长一点的内容。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个评论输入框：最小高度 4 行，随内容自动增高，右下角显示「0 / 300」字数统计，聚焦时显示操作按钮。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加一个大点的输入框。
改成这样说
加多行 Text Area：min-height 4 行 + auto-grow（上限 320px），右下角「0 / 300」字数统计，接近上限时变色。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。