React 组件

UGTextarea 文本域

用于多行文本录入，支持自动高度、字符计数、拖拽方向、尺寸、字段状态和原生文本域能力。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGTextarea } from '@ug666/ui-react'

适合说明、备注、反馈等多行内容。

项目说明

请只保留必要信息

内容增长时自动扩展，超过最大行数后恢复内部滚动。

自动高度

计数与 maxLength 使用同一个上限；中文输入法选字期间保留组合文本，组合结束后再应用自定义字符上限。

发布说明

错误、只读、禁用与拖拽策略保持明确区分。

错误状态

内容不能少于 10 个字

只读内容

这段内容只能查看和复制。

禁用内容

禁止拖拽

name、required、minLength 和提交值都落在真实 textarea 上。

属性	类型	默认值	说明
value / defaultValue	string	—	受控值或非受控初始值。
onValueChange	(value: string) => void	—	文本变化时提供当前字符串值。
label	ReactNode	—	与真实 textarea 关联的字段标签。
rows	number	3	普通模式的默认行数，也是自动高度的默认最小行数。
autosize	boolean \| { minRows?: number; maxRows?: number }	false	根据内容自动调整高度，并可限制行数范围。
resize	'none' \| 'both' \| 'horizontal' \| 'vertical'	'vertical'	非自动高度模式下的原生拖拽方向。
clearable / clearIcon	boolean / ReactNode	false / X	显示清空操作并可覆盖默认图标。
showWordLimit	boolean	false	配合 maxLength 显示字符计数。
wordLimitPosition	'inside' \| 'outside'	'inside'	字符计数位于文本域内部或外侧。
countCharacters	(value: string) => number	String.length	覆盖字符计算规则。
size	'sm' \| 'default' \| 'lg'	ConfigProvider / default	控制字号、内边距与最小高度。
error	ReactNode	—	错误信息，并同步设置无障碍错误状态。
helperText	ReactNode	—	无错误时显示的辅助说明。
disabled	boolean	ConfigProvider / false	禁用输入和焦点交互。
readOnly	boolean	false	只读但仍允许聚焦和复制。
ref	Ref<HTMLTextAreaElement>	—	获取真实 textarea。
原生属性	TextareaHTMLAttributes<HTMLTextAreaElement>	—	透传 name、required、aria-* 等原生属性。