---
url: "https://vueda.dev/v3/reference/theming/keys/Textarea.md"
title: "Textarea"
---

# Textarea

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The multi-line counterpart to [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root). Same field fill, bottom `field-line`, recoloured focus and `aria-invalid` line, and read-only recipe; grows vertically via `field-sizing: content` so the field expands with the typed text rather than holding a fixed `min-height`. Horizontal padding moves to `px-3 py-2` (both axes) because a textarea's content box is two-dimensional.

Vue component: [Textarea](/v3/reference/api/vue/Textarea.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Textarea.md#theme-key-Textarea-root) | 8 classes | The multi-line counterpart to [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root). Same field fill, bottom `field-line`, recoloured focus and `aria-invalid` line, and read-only recipe; grows vertically via `field-sizing: content` so the field expands with the typed text rather than holding a fixed `min-height`. Horizontal padding moves to `px-3 py-2` (both axes) because a textarea's content box is two-dimensional. |

<a id="theme-key-Textarea-root"></a>

## root

> The multi-line counterpart to [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root). Same field fill, bottom `field-line`, recoloured focus and `aria-invalid` line, and read-only recipe; grows vertically via `field-sizing: content` so the field expands with the typed text rather than holding a fixed `min-height`. Horizontal padding moves to `px-3 py-2` (both axes) because a textarea's content box is two-dimensional.

Default classes:

```text
placeholder:text-muted-foreground
field-line flex field-sizing-content min-h-16 w-full rounded-vueda-field bg-field hover:bg-field-hover px-3 py-2 text-base transition-shadow
md:text-sm
disabled:pointer-events-none disabled:cursor-not-allowed
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
disabled:[-webkit-text-fill-color:var(--disabled-foreground)]
focus-visible:hairline-ring focus-visible:focus-ring-shadow data-[warning=true]:not-aria-invalid:hairline-warning aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive
read-only:bg-transparent read-only:hover:bg-transparent read-only:hairline-border
```

Source: `client/lib/theme/vueda-tailwind/controls/Textarea.theme.js:17`