跳到主要内容

Textarea 多行输入Textarea

收集多行文字：备注、评论、描述。默认随内容自动增高，不需要用户拖拽。

基本用法

默认最少 3 行，内容变多时自动增高。和 Input 一样需要标签：放进 Field 或给 aria-label。

选填

行数与增高

minRows / maxRows 限定高度范围，超过 maxRows 后在内部滚动。关闭 autoGrow 后高度固定，可以用 resize 允许手动拖拽。

状态

请至少写 10 个字

受控用法

onChange 的参数是新值。下面用它做了一个字数统计和超长校验。

12 / 80

API

属性

属性类型默认值说明
valuestring—当前值（受控）。
defaultValuestring''初始值（非受控）。
onChange(value: string) => void—值变化时触发，参数是新值。
autoGrowbooleantrue随内容自动增高。优先用 CSS field-sizing，不支持的浏览器用脚本量高度。
minRowsnumber3最少行数。
maxRowsnumber—最多行数，超过后内部滚动。
resize'none' | 'vertical''none'允许手动拖拽改高度；关闭 autoGrow 时才有意义。
invalidboolean—校验失败：标红并设置 aria-invalid。在 Field 里默认跟随 Field。
…restTextareaHTMLAttributes—其余原生属性、className、style 和 ref 都落在 <textarea> 上。

无障碍

  • 根节点就是原生 <textarea>（多行 textbox）。Enter 换行，Tab 离开。
  • 必须有可读名称：放进带 label 的 Field，或给 aria-label。
  • 内容超过 maxRows 后的滚动是浏览器原生滚动，方向键和 PageUp / PageDown 照常可用。
  • 校验失败时设置 aria-invalid；Field 的提示和错误通过 aria-describedby 关联。
  • 字数统计这类持续变化的文字不要放进 aria-live 区域，免得每打一个字都播报。