Leaf UI
  • 简体中文

      • Textarea 文本域

      用于输入多行文本，如留言、简介或备注。

      基础用法

      交互预览基础用法
      basic.tsx
      import { Textarea } from '@sudden3/leaf-ui';

export function TextareaBasic() {
  return (
    <div className="leaf-demo-stack">
      <Textarea aria-label="项目简介" placeholder="描述一下你的新想法…" rows={3} maxLength={200} />
      <Textarea aria-label="只读介绍" defaultValue="把灵感，种进界面。" readOnly rows={2} />
      <Textarea aria-label="禁用介绍" placeholder="暂时不可编辑" disabled rows={2} />
    </div>
  );
}

      受控与长度提示

      使用 value / onChange 管理内容，结合 maxLength 限制长度。长度提示由业务决定，resize="none" 可以关闭手动缩放。

      交互预览受控与长度提示
      0 / 120
      controlled.tsx
      import { Textarea } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function TextareaControlled() {
  const [value, setValue] = useState('');
  return (
    <div className="leaf-demo-stack">
      <div className="leaf-demo-field">
        <Textarea
          aria-label="留言"
          value={value}
          maxLength={120}
          resize="none"
          placeholder="最多 120 个字符"
          onChange={(event) => setValue(event.target.value)}
        />
        <span className="leaf-demo-note">{value.length} / 120</span>
      </div>
      <Textarea aria-label="错误留言" status="error" placeholder="请补充描述" />
    </div>
  );
}

      Textarea API

      属性类型默认值说明
      size'sm' | 'md' | 'lg''md'文本域尺寸
      status'error' | 'warning'—校验状态
      rowsnumber3初始可见行数
      resize'none' | 'vertical' | 'both''vertical'允许的手动缩放方向
      value / defaultValuestring | number | readonly string[]—受控值 / 非受控初始值
      onChangeChangeEventHandler<HTMLTextAreaElement>—从 event.target.value 读取内容
      disabled / readOnlybooleanfalse禁用 / 只读
      refRef<HTMLTextAreaElement>—文本域引用

      可通过 rows 调整行数，或通过 style 设置高度。支持其他 textarea 属性。通过 label 或 aria-label 提供名称，错误说明可用 aria-describedby 关联。

      类型

      可导入 TextareaProps 定义组件属性，或单独使用尺寸、校验状态类型：

      import type { TextareaProps, ControlSize, ControlStatus } from '@sudden3/leaf-ui';