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

# TextareaControl

A complete textarea field with integrated label and description.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` *(required)* | `string` | — | The accessible label. All controls must be labeled. |
| `description` | `string` | — | The accessible description, associated using `aria-describedby`.<br>For screen reader accessibility, this should only contain plain text, and no semantics such as links. |
| `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. |
| `details` | `ReactNode` | — | Additional information about the field, which unlike a normal description, can include links and other semantic elements.<br>Do not use this prop when the content is only plain text; use `description` instead. |
| `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. |
| `hideLabelFromVision` | `boolean` | `false` | Whether to visually hide the label while keeping it accessible to screen readers. |
| `rows` | `number` | `4` | The number of rows the textarea should contain. |


## Examples

### Default

```tsx
const Default = () => <TextareaControl
    label="Label"
    description="This is the description."
    placeholder="Placeholder" />;
```

### Visually Hidden Label

```tsx
const VisuallyHiddenLabel = () => <TextareaControl hideLabelFromVision />;
```

### With Details

```tsx
const WithDetails = () => <TextareaControl description={undefined} details={DETAILS_EXAMPLE} />;
```

### Resize

By default, the textarea is resizable in the vertical direction,
using the `resize` handle at the bottom right. Although it is possible to modify
or disable this [resize behavior through CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/resize),
we generally do not recommend it, as the default behavior is best for usability in most cases.

```tsx
const Resize = () => <TextareaControl />;
```

### With Overflow

```tsx
const WithOverflow = () => <TextareaControl
    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.`} />;
```

### Disabled

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