---
name: Textarea
package: '@wordpress/ui'
category: '@wordpress-ui'
status: stable
canonical: 'https://system.automattic.design/components/textarea/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-form-primitives-textarea--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/form'
---

# Textarea

A low-level primitive for a textarea field.

Prefer `TextareaControl` when using with a standard label and description.

```tsx
import { Textarea } from '@wordpress/ui';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLAttributesWithRef<any>> \| ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>> \| undefined` | — | Replaces the component's default HTML element using a given React element, or a function that returns a React element. |
| `style` | `CSSProperties` | — | CSS style to apply to the element. |
| `className` | `string` | — | CSS class name to apply to the element. |
| `defaultValue` | `string \| number \| readonly string[] \| undefined` | — | The default value to use in uncontrolled mode. |
| `disabled` | `boolean` | — | Whether the field is disabled. |
| `value` | `string \| number \| readonly string[] \| undefined` | — | The value to use in controlled mode. |
| `onValueChange` | `(value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void` | — | Callback fired when the `value` changes. Use when controlled. |
| `rows` | `number` | `4` | The number of rows the textarea should contain. |


## Examples

### Default

```tsx
const Default = () => <Textarea placeholder="Placeholder" aria-label="Value" />;
```

### Disabled

```tsx
const Disabled = () => <Textarea disabled />;
```

### With Overflow

```tsx
const WithOverflow = () => <Textarea
    defaultValue={`Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`} />;
```

### With One Row

When `rows` is set to `1`, the textarea will have the same footprint as a default `Input`.

```tsx
const WithOneRow = () => <Textarea rows={1} />;
```