组件 · 数据录入

Textarea 多行输入

多行文本输入，适用于备注、说明等长文本；不要因 Input 使用频率更高而排在多行场景第一。

入口 @selrux/ui/textarea · 源码 src/components/textarea/index.ts · 1 个组件 · 发布状态 preview

使用建议

避免：用单行 Input 代替多行备注
限制：未标 stable

引入

tsx

import { Textarea, textareaVariants } from '@selrux/ui/textarea';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

多行文本输入。

字数统计与清除

showCount 显示字数，clearable 显示清除按钮（受控）。

6 / 100

自适应高度与状态

autoSize 随内容增高；invalid / disabled 表示状态。

不可编辑

尺寸、调整与页脚

size；resize 为 none / vertical / both；footer 自定义底部内容；clearLabel 为清除按钮名称，onClear 接收清除事件。

已清空 0 次

API

属性覆盖：示例用到 14 / 14 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Textarea

带边框和六档排版的多行输入。ref 仍指向 textarea。

属性	说明	类型	默认值
`footer`	同一边框内、编辑区下方的内容。原样渲染，不进入 value 或 FormData，也不并进可访问名称。	`ReactNode`	-
`label`	字段名交给外部 label 或 aria-label。	`undefined`	-
`defaultValue`	与 value 互斥。	`string`	-
`error`	错误文案交给 aria-errormessage。	`undefined`	-
`disabled`	禁止编辑但保留聚焦与文本选择。 DOM 使用 aria-disabled 与 readonly 表达，并移除 name 以排除 FormData；祖先 fieldset 的禁用仍是原生行为。	`boolean`	-
`value`	当前文本。父级更新时不改写选区，也不伪造 onChange。	`string`	-
`onValueChange`	真实编辑或内置清空的统一通知。不是 value prop 的监听器。编辑和清空都经此通知父级。	`((value: string, detail: TextareaValueChangeDetail) => void) \| (((value: string, detail: TextareaValueChangeDetail) => void) & ((value: string, detail: TextareaValueChangeDetail) => void))`	-
`invalid`	错误状态。为真时设置 aria-invalid，不渲染错误文案。显式 aria-invalid 优先。	`boolean`	-
`rows`	原生行数。省略时为 3。	`number`	`3`
`clearable`	有值且可编辑时显示内置清空按钮。空值、只读、禁用和输入法组字期间不可操作。开启内置清空。	`boolean`	-
`clearLabel`	清空按钮的完整可访问名称。省略时由调用方或中文默认“清空输入”补齐。	`string`	-
`showCount`	字数计数。false 或不传时不渲染计数节点。	`TextareaShowCount`	-
`onClear`	有效清空请求之后的动作通知。不负责写值。	`MouseEventHandler<HTMLButtonElement>`	-
`rootClassName`	稳定外壳的类名。className 仍落在 textarea 上。	`string`	-
`rootStyle`	稳定外壳的样式。style 仍落在 textarea 上。	`CSSProperties`	-
`help`	说明交给 aria-describedby。	`undefined`	-
`autoSize`	关闭自适应。省略与 false 相同。	`boolean \| { minRows?: number; maxRows?: number; }`	-
`size`	尺寸。省略时使用 ConfigProvider，无配置时为 md。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`resize`	-	`"none" \| "both" \| "vertical"`	-
`children`	多行值只走 value。底部内容只走 footer。	`undefined`	-

另有 289 项原生属性与事件继承自 HTMLAttributes / TextareaHTMLAttributes，原样透传。

导出类型：StyledTextarea、TextareaAutoSize、TextareaControlledProps、TextareaCountInfo、TextareaProps、TextareaResize、TextareaSize、TextareaUncontrolledProps、TextareaValueChangeDetail、TextareaVariantOptions

函数与常量

名称	说明	签名 / 类型
`textareaVariants`	组合外壳类、尺寸、拖动方向和可选能力。	`(options?: TextareaVariantOptions) => string`

摘自源码 JSDoc。

原样渲染，不进入 value 或 FormData，也不并进可访问名称。
Textarea.label：字段名交给外部 label 或 aria-label。
Textarea.error：错误文案交给 aria-errormessage。
Textarea.disabled：禁止编辑但保留聚焦与文本选择。
DOM 使用 aria-disabled 与 readonly 表达，并移除 name 以排除 FormData；祖先 fieldset 的禁用仍是原生行为。
为真时设置 aria-invalid，不渲染错误文案。
显式 aria-invalid 优先。
Textarea.clearLabel：清空按钮的完整可访问名称。
Textarea.help：说明交给 aria-describedby。