Installation
import { WrTextarea } from 'ngwr/textarea';
import { FormsModule } from '@angular/forms';
@Component({ imports: [WrTextarea, FormsModule] })
export class MyComponent {}Basic usage
<wr-textarea placeholder="Notes" [(value)]="text" />Rows
<wr-textarea [rows]="5" />Autosize
Grows with content. Combine with maxRows to cap height.
<wr-textarea autosize [maxRows]="6" [(value)]="text" />Fixed size
<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 |