多行输入框
Textarea
别名:多行输入框文本域大输入框留言框备注框富文本输入区
这是什么
用一块可多行增长的输入区收集长文本，如简介、备注、留言与反馈。 支持手动或自动增高，常配字数统计与提交按钮；超出上限时计数变红提醒， 内容换行显示而非溢出截断。
交互实验室
试一试，再决定怎么用输入多行内容，观察字数与尺寸变化。
正在加载实验室…
使用时关注什么
- 01标签与字数限制始终可见，不能只写在占位符中。
- 02调整高度时避免遮挡后续操作。
✓ 适用场景
- 收集简介、备注、留言等多段落长文本
- 用户需要换行组织内容结构
- 字数有限制，需要实时统计反馈
✕ 不适用场景
- 单行短字段（姓名、邮箱），用 input 更紧凑
- 需要加粗、标题等格式，用富文本编辑器
- 结构化输入（键值对、标签），用专用控件
常见形式
固定高
Fixed
固定行数内滚动，布局稳定
自动增高
Autosize
随内容增长，适合聊天与评论框
带字数
With counter
右下角实时字数，超限变红
实现要点
resizefield-sizing: contentmax-height: overflowcounter: length基础样式与 input 一致但多行：min-h 固定起点，resize-y 允许拖拽增高； 自动增高用 field-sizing: content（或 JS 监听 input 设置 scrollHeight）。 字数统计用 value.length 对比 maxLength，超限切换红色并阻止继续提交。
平台 API
<textarea>代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| HTML | <textarea> |
| shadcn/ui | Textarea |
| MUI | TextField multiline |
| AntD | Input.TextArea |
相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件相似概念在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用页面上的文本本身即可编辑：单击把文本原位变成输入框，Enter 或失焦确认，Esc 取消， 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击，特别适合单字段的快速修订场景。
交互模式搭配使用在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件相似概念