Textarea 文本域

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

基础用法

basic.tsx

import { Form, FormField, Textarea } from '@ifhover/leaf-ui';

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

受控与长度提示

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

controlled.tsx

import { Form, FormField, Textarea } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TextareaControlled() {
  const [value, setValue] = useState('');
  return (
    <Form layout="vertical">
      <FormField label="留言" help={`${value.length} / 120`}>
        <Textarea
          value={value}
          maxLength={120}
          resize="none"
          placeholder="最多 120 个字符"
          onChange={(event) => setValue(event.target.value)}
        />
      </FormField>
      <FormField label="错误留言" error="请补充描述。">
        <Textarea placeholder="请补充描述" />
      </FormField>
    </Form>
  );
}

扩展用法

自动高度字数统计

8 / 120

extensions.tsx

import { Space, Textarea } from '@ifhover/leaf-ui';

export function ExtensionDemo() {
  return (
    <Space direction="vertical" align="stretch">
      <label htmlFor="textarea-extension-1">
        自动高度
        <Textarea
          id="textarea-extension-1"
          autoSize={{ minRows: 2, maxRows: 6 }}
          placeholder="输入更多内容试试"
        />
      </label>
      <label htmlFor="textarea-extension-2">
        字数统计
        <Textarea
          id="textarea-extension-2"
          showCount
          maxLength={120}
          defaultValue="计划从这里开始。"
        />
      </label>
    </Space>
  );
}

Textarea API

属性	类型	默认值	说明
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	文本域尺寸
`status`	`'error' \| 'warning'`	—	校验状态
`rows`	`number`	`3`	初始可见行数
`resize`	`'none' \| 'vertical' \| 'both'`	`'vertical'`	允许的手动缩放方向
`value` / `defaultValue`	`string \| number \| readonly string[]`	—	受控值 / 非受控初始值
`onChange`	`ChangeEventHandler<HTMLTextAreaElement>`	—	从 `event.target.value` 读取内容
`disabled` / `readOnly`	`boolean`	`false`	禁用 / 只读
`ref`	`Ref<HTMLTextAreaElement>`	—	文本域引用
`autoSize`	`boolean \| TextareaAutoSize`	`false`	根据内容调整高度，可限制行数
`showCount`	`boolean \| ((value: string, maxLength?: number) => ReactNode)`	`false`	显示字数，可自定义渲染

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

类型

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

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

扩展类型

import type { TextareaAutoSize } from '@ifhover/leaf-ui';

TextareaAutoSize API

属性	类型	默认值	说明
`minRows`	`number`	—	最少行数
`maxRows`	`number`	—	最多行数

#Textarea 文本域

#基础用法

#受控与长度提示

#扩展用法

#Textarea API

#类型

#扩展类型

#TextareaAutoSize API