# Textarea

A native multi-line input that grows with its content, between rows and maxRows.

```ehtml Example
import { Textarea } from "@elements/ui/textarea";

<Textarea value={form.bio} placeholder="Tell us about yourself" />
<Textarea value={form.notes} rows={2} maxRows={8} />
<Textarea value={form.code} autosize={false} rows={10} resize="both" />
```

## Parts

| Part | What it is |
|---|---|
| `.textarea` | The `<textarea>`. class="textarea is-autosize" works without the template in browsers with field-sizing. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `value` | `string` (two-way) | `""` | The text. Bind it to state; typing writes back. |
| `rows` | `number` | `3` | Minimum height in lines. |
| `maxRows` | `number` | `0` | Stops growing at this many lines and scrolls. 0 is no limit. |
| `autosize` | `boolean` | `true` | Grows with its content. |
| `resize` | `"none" \| "vertical" \| "both"` | `"vertical"` | The user's resize handle. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Type size and padding from the control tokens. |
| `placeholder` | `string` | `""` | Hint text shown while empty. |
| `name` | `string` | `""` | Form field name. |
| `maxlength` | `number` | `0` | Native maxlength. 0 is none. |
| `invalid` | `boolean` | `false` | aria-invalid and the danger border and ring. |
| `disabled` | `boolean` | `false` | Native disabled. |
| `readonly` | `boolean` | `false` | Focusable, not editable. |
| `required` | `boolean` | `false` | Native required. |
| `class` | `string` | `""` | Extra classes on the textarea. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | id, minlength, wrap, spellcheck, aria-\*, data-\*. |
| `oninput / onchange` | `(e) => void` | `() => {}` | Edit and committed change. |
| `onfocus / onblur / onkeydown` | `(e) => void` | `() => {}` | Focus and key events. |

## Keyboard

| Keys | Action |
|---|---|
| `Enter` | Inserts a newline. It does not submit the form. |
| `Tab` | Moves to the next control. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-size` | `"sm" \| "md" \| "lg"` | textarea |
| `data-resize` | `"none" \| "vertical" \| "both"` | textarea |
| `data-max-rows` | the limit, when set | textarea |
| `data-invalid` | present while invalid | textarea |
| `data-disabled` | present while disabled | textarea |

## Accessibility

- A native `<textarea>`: editing, spellcheck, autofill and validation are the browser's.
- invalid sets aria-invalid; inside a Field the field wires label, description and error.
- Growing never moves the caret or the scroll position of the page under it; past maxRows it scrolls inside.

## See also

- [ButtonGroup](button-group): Related buttons, or an input and its buttons, joined into one control.
- [Input](input): A native text input in the theme's control chrome, with a two-way value.
- [InputGroup](input-group): An Input or Textarea with icons, text and buttons inside one box.
- [Field](field): A label, a control, a description and an error wired together, with native validation that never moves the layout.
- [Label](label): A native label for a control, which dims when the control is disabled.
- [NativeSelect](native-select): The browser's own select, styled as a control. Native pickers on phones, no script needed.