> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Textarea

> Enter multiple lines of text with optional automatic resizing.

Use `Textarea` for notes, descriptions, and other multiline values. It integrates with [Field](/ui/components/input/field) for labels and validation.

## Basic textarea

```tsx theme={null}
import { Field, Textarea } from 'twenty-ui/input';

export const NotesField = () => (
  <Field.Root name="notes">
    <Field.Label>Notes</Field.Label>
    <Textarea rows={4} defaultValue="Follow up next week." />
    <Field.Description>Add context for your team.</Field.Description>
  </Field.Root>
);
```

Native textarea attributes such as `rows`, `maxLength`, `required`, and `readOnly` are available. `size` accepts `sm` or `md` and defaults to `md`.

## Controlled value and automatic resizing

```tsx theme={null}
import { useState } from 'react';
import { Field, Textarea } from 'twenty-ui/input';

export const DescriptionField = () => {
  const [description, setDescription] = useState('');

  return (
    <Field.Root name="description">
      <Field.Label>Description</Field.Label>
      <Textarea
        value={description}
        onValueChange={setDescription}
        autoResize
        rows={2}
        maxRows={6}
        maxLength={500}
      />
      <Field.Description>
        {description.length} of 500 characters
      </Field.Description>
    </Field.Root>
  );
};
```

`autoResize` adjusts the textarea's height as its content changes. Use `maxRows` to cap the height. `onValueChange` receives the next string and event details; native `onChange` is also available. Keep keyboard focus on the textarea while the user types and use helper text for limits.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

<ParamField body="autoResize" type="boolean" default="false">
  Grows the textarea with its content instead of showing a scrollbar.
</ParamField>

<ParamField body="className" type="string | ((state: InputState) => string | undefined)">
  CSS class applied to the textarea, or a function that returns a class
  based on the input state.
</ParamField>

<ParamField body="maxRows" type="number">
  Maximum number of rows the textarea grows to when `autoResize` is set.
  Longer content scrolls.
</ParamField>

<ParamField body="onValueChange" type="((value: string, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Called with the new value when the textarea value changes.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>" default="<textarea />">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;" default="md">
  Visual size of the textarea.
</ParamField>