Textarea
textarea多行输入 · 自适应高度
用法
基础用法
多行输入，rows 控制初始可见行数（默认 3）。
tsx
<Textarea placeholder="写点什么…" className="w-64" />尺寸
size 提供 sm / md（默认）/ lg 三档。
tsx
<>
<Textarea size="sm" placeholder="sm" className="w-64" />
<Textarea size="md" placeholder="md" className="w-64" />
<Textarea size="lg" placeholder="lg" className="w-64" />
</>自适应高度
autoResize 随内容自动长高，rows 作下限。
tsx
<Textarea autoResize defaultValue={"随内容长高\n第二行\n第三行"} className="w-64" />无效态
invalid 标红边框与焦点环（独立使用时手动传）。
tsx
<Textarea invalid defaultValue="错的内容" className="w-64" />禁用态
disabled 降透明度并屏蔽交互。
tsx
<Textarea disabled defaultValue="禁用态" className="w-64" />何时用
多行文本输入（备注、描述、留言）。单行输入用 Input；从固定选项选一项用 Select。开 autoResize 让高度随内容增长，rows 作为下限。放进 hulian Field 内会自动接管 label/error/aria 关联。
导入
ts
import { Textarea, textareaVariants } from "@hulianui/ui"Props
继承原生 <textarea> 属性（除 size 被覆盖外，如 value/onChange/rows/placeholder/disabled…）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | "sm" ｜ "md" ｜ "lg" | "md" | 尺寸（CVA 变体，覆盖原生 size） |
| invalid | boolean | false | 独立使用时标红；在 hulian Field 内由 Field.Root invalid 自动驱动 |
| autoResize | boolean | false | 随内容自适应高度（JS scrollHeight，rows 为下限） |
| rows | number | 3 | 初始/最小行高 |
| disabled | boolean | false | 禁用 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onChange | (e: ChangeEvent<HTMLTextAreaElement>) => void | 透传原生输入回调（受控时配合 value 使用） |
禁忌 / 坑
- 实现/扩展 field-aware Textarea 时见 [[base-ui-field-control-render-textarea-type-safe]]：Base UI Field 无 Textarea 原语，textarea 专属 props（ref/rows/onInput）要放在
render元素上而非Field.Control，否则 TS 报 ref 类型错或静默丢 Field a11y 接线。 - 在 hulian Field 内不要重复传
invalid，由 Field.Root 自动驱动。
相关
Playground
<Textarea size="md" placeholder="写点什么…" rows={3} />