# Textarea

> Multi-line text input with optional autosize. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](https://ngwr.dev/guides/forms).

Source: https://ngwr.dev/reference/components/textarea  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrTextarea } from 'ngwr/textarea';
import { FormsModule } from '@angular/forms';

@Component({ imports: [WrTextarea, FormsModule] })
export class MyComponent {}
```

## Basic usage

```html
<wr-textarea placeholder="Notes" [(value)]="text" />
```

## Rows

```html
<wr-textarea [rows]="5" />
```

## Autosize

Grows with content. Combine with maxRows to cap height.

```html
<wr-textarea autosize [maxRows]="6" [(value)]="text" />
```

## Fixed size

```html
<wr-textarea [resizable]="false" [(value)]="text" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `placeholder` | Native placeholder text. | `string` | `''` |
| `ariaLabel` | Accessible name for the field. Falls back to the placeholder — the native `<textarea>` lives inside the component, so a `<label for>` outside cannot reach it. | `string \| null` | `null` |
| `size` | Control size — shares the `--wr-control-*` contract. Unset, it falls back to `provideWrConfig({ textarea: { size } })`. | `WrTextareaSize \| null` | `'md'` |
| `rows` | Visible row count. | `number` | `3` |
| `resizable` | Allow user resize via the corner grip. | `boolean` | `true` |
| `resize` | Resize direction of the corner grip (the grip icon adapts). | `WrTextareaResize` | `'vertical'` |
| `readonly` | Read-only state. | `boolean` | `false` |
| `autosize` | Grow the textarea to fit its content. | `boolean` | `false` |
| `maxRows` | Cap autosize at this many rows. Ignored when `autosize` is false. | `number \| null` | `null` |
| `disabled` | Disable the textarea. Bound automatically from the field's disabled state when used with `[formField]`. | `boolean` | `false` |
| `value` | The edited text. Bound by `[formField]`, or two-way via `[(value)]`. | `string` | `''` |
| `(touch)` | Emitted on blur so a bound field can mark itself touched. | `void` | — |

## CSS variables

Custom properties `ngwr/textarea` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-textarea-bg` | `var(--wr-color-surface)` | `.wr-textarea` +1 variant override |
| `--wr-textarea-border` | `var(--wr-color-outline)` | `.wr-textarea` +1 variant override |
| `--wr-textarea-color` | `var(--wr-color-on-surface)` | `.wr-textarea` +1 variant override |
| `--wr-textarea-font-size` | `var(--wr-text-sm)` | `.wr-textarea` +2 variant overrides |
| `--wr-textarea-line-height` | `1.375rem` | `.wr-textarea` +2 variant overrides |
| `--wr-textarea-padding-x` | `var(--wr-control-padding-x-md)` | `.wr-textarea` +2 variant overrides |
| `--wr-textarea-padding-y` | `0.5rem` | `.wr-textarea` +2 variant overrides |
| `--wr-textarea-placeholder` | `rgba(var(--wr-color-on-surface-muted-rgb), 0.7)` | `.wr-textarea` |
| `--wr-textarea-radius` | `var(--wr-control-radius-md)` | `.wr-textarea` +2 variant overrides |
| `--wr-textarea-ring` | `transparent` | `.wr-textarea` +1 variant override |