# Textarea

Multi-line text field.

```tsx
import { Textarea } from "@/components/ui/textarea"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"

<Field>
  <FieldLabel>Notes</FieldLabel>
  <FieldControl>
    <Textarea placeholder="E.g. deliver after 2 PM" />
  </FieldControl>
</Field>
```

## Usage

### What you provide
- A linked `Label`, a `placeholder` with a real example, optional `rows`.
- If there is a character limit, show the counter below in `text-muted-foreground`.

## Accessibility

- Same rules as `Input`: wrap it in `Field`, keep a visible label, tie instructions and errors to it, and keep the typed text after an invalid submit.
- `Enter` adds a new line here; the form is submitted with its button.
- Announce a character limit before typing; when showing a live counter, don't announce every keystroke.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Input "text"](https://magoo.cc/en/components/forms/input-text.html) (`input-text`), [Form validation](https://magoo.cc/en/components/messages/form-validation.html) (`validacao-formularios`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add textarea
```

```tsx
<Field>
  <FieldLabel />
  <FieldControl>
    <Textarea />
  </FieldControl>
</Field>
```

### Textarea

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Controlled value. |
| `defaultValue` | `string` | — | Initial value when uncontrolled. |
| `placeholder` | `string` | — | An example value; never a replacement for the label. |
| `rows` | `number` | — | Visible lines; the field also grows with its content. |
| `maxLength` | `number` | — | Character limit; state it before the person types. |
| `disabled` | `boolean` | `false` | Blocks editing. |

## Related pages

- [Field](https://aline-aroucha.github.io/pui/components/field.html)
- [Input](https://aline-aroucha.github.io/pui/components/input.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/textarea.html