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

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

# Textarea

Enter multiple lines of text.

## Examples

Use rows for initial height and resize for manual resizing. Standard maxLength, name, required and form attributes are supported. Controlled values update through onChange. className and style apply to the container.


Project description

Read-only introduction

Disabled introduction

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/textarea/basic.tsx"
import { Form, FormField, Textarea } from '@ifhover/leaf-ui';

export function TextareaBasic() {
  return (
    <Form layout="vertical">
      <FormField label="Project description">
        <Textarea
          aria-label="Project description"
          placeholder="Describe your new idea…"
          rows={3}
          maxLength={200}
        />
      </FormField>
      <FormField label="Read-only introduction">
        <Textarea
          aria-label="Read-only introduction"
          defaultValue="Plant your ideas in the interface."
          readOnly
          rows={2}
        />
      </FormField>
      <FormField label="Disabled introduction">
        <Textarea
          aria-label="Disabled introduction"
          placeholder="Cannot edit right now"
          disabled
          rows={2}
        />
      </FormField>
    </Form>
  );
}
```

Expand code


Message

0 / 120

Message error

Add a description.

controlled.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/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="Message" help={`${value.length} / 120`}>
        <Textarea
          value={value}
          maxLength={120}
          resize="none"
          placeholder="Up to 120 characters"
          onChange={(event) => setValue(event.target.value)}
        />
      </FormField>
      <FormField label="Message error" error="Add a description.">
        <Textarea placeholder="Add a description" />
      </FormField>
    </Form>
  );
}
```

Expand code

## Extended features


Auto heightCharacter count21 / 120

extensions.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/textarea/extensions.tsx"
import { Space, Textarea } from '@ifhover/leaf-ui';

export function ExtensionDemo() {
  return (
    <Space direction="vertical" align="stretch">
      <label htmlFor="textarea-extension-1">
        Auto height
        <Textarea
          id="textarea-extension-1"
          autoSize={{ minRows: 2, maxRows: 6 }}
          placeholder="Type more content"
        />
      </label>
      <label htmlFor="textarea-extension-2">
        Character count
        <Textarea
          id="textarea-extension-2"
          showCount
          maxLength={120}
          defaultValue="Start your plan here."
        />
      </label>
    </Space>
  );
}
```

Expand code

## Textarea API

| Property                 | Type                                                            | Default      | Description                                   |
| ------------------------ | --------------------------------------------------------------- | ------------ | --------------------------------------------- |
| `size`                   | `'sm' \| 'md' \| 'lg'`                                          | `'md'`       | Control size                                  |
| `status`                 | `'error' \| 'warning'`                                          | —            | Validation appearance                         |
| `rows`                   | `number`                                                        | `3`          | Initial visible rows                          |
| `resize`                 | `'none' \| 'vertical' \| 'both'`                                | `'vertical'` | Allowed manual resizing direction             |
| `value` / `defaultValue` | `string \| number \| readonly string[]`                         | —            | Controlled value / initial uncontrolled value |
| `onChange`               | `ChangeEventHandler<HTMLTextAreaElement>`                       | —            | Read event.target.value                       |
| `disabled` / `readOnly`  | `boolean`                                                       | `false`      | Disabled / read-only                          |
| `ref`                    | `Ref<HTMLTextAreaElement>`                                      | —            | DOM reference                                 |
| `autoSize`               | [`boolean \| TextareaAutoSize`](#textareaautosize-api)          | `false`      | Resize to content with optional row limits    |
| `showCount`              | `boolean \| ((value: string, maxLength?: number) => ReactNode)` | `false`      | Display count or a custom renderer            |

## Types

Import TextareaProps to describe component props. Option types in the API table link to their detailed fields above.

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

## Forms and localization

Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in [FormField](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/form.md#formfield-api) for labels, help and errors. [ConfigProvider](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/config-provider.md) supplies regional themes and translated built-in UI. Application labels and options are your responsibility.

## Extension types

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

## TextareaAutoSize API

| Property  | Type     | Default | Description  |
| --------- | -------- | ------- | ------------ |
| `minRows` | `number` | —       | Minimum rows |
| `maxRows` | `number` | —       | Maximum rows |