> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/textarea.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Textarea 文本域

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

## 基础用法


项目简介

只读介绍

禁用介绍

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/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" 可以关闭手动缩放。


留言

0 / 120

错误留言

请补充描述。

controlled.tsx

复制代码

```tsx lineNumbers file="../../src/examples/textarea/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

复制代码

```tsx lineNumbers file="../../src/examples/textarea/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`](#textareaautosize-api)          | `false`      | 根据内容调整高度，可限制行数              |
| `showCount`              | `boolean \| ((value: string, maxLength?: number) => ReactNode)` | `false`      | 显示字数，可自定义渲染                 |

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

## 类型

可导入 [`TextareaProps`](#textarea-api) 定义组件属性，或单独使用尺寸、校验状态类型：

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

## 扩展类型

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

## TextareaAutoSize API

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