import { Component } from '@angular/core';
import { WrTextarea } from 'ngwr/textarea';
@Component({ imports: [WrTextarea] })
export class MyComponent {}Textarea
A multi-line text field that can grow with its content.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
Bind the text with [(value)] or any Angular form.
<wr-textarea placeholder="Notes" [(value)]="text" />Rows
rows sets the starting height.
<wr-textarea [rows]="5" />Autosize
autosize grows the field with its text; maxRows caps it.
<wr-textarea autosize [maxRows]="6" [(value)]="text" />Fixed size
[resizable]="false" removes the resize handle.
<wr-textarea [resizable]="false" [rows]="4" placeholder="No resize handle" />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. | WrTextareaSize | '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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/textarea's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-textarea-bg | var(--wr-color-surface) | .wr-textarea +2 variant overrides |
--wr-textarea-border | var(--wr-border-base) | .wr-textarea +1 variant override |
--wr-textarea-color | var(--wr-color-on-surface) | .wr-textarea +1 variant override |
--wr-textarea-font-family | var(--wr-font-family-base) | .wr-textarea |
--wr-textarea-font-size | var(--wr-text-sm) | .wr-textarea +2 variant overrides |
--wr-textarea-line-height | var(--wr-control-line-height-md) | .wr-textarea +2 variant overrides |
--wr-textarea-padding-x | var(--wr-control-padding-x-md) | .wr-textarea +2 variant overrides |
--wr-textarea-padding-y | var(--wr-space-sm) | .wr-textarea +2 variant overrides |
--wr-textarea-placeholder | var(--wr-color-placeholder) | .wr-textarea |
--wr-textarea-radius | var(--wr-control-radius-md) | .wr-textarea +2 variant overrides |
--wr-textarea-ring | transparent | .wr-textarea +1 variant override |
Dependencies
| Built on | Form |
|---|---|
| Used by | Schema Form |
See also
Component InputA directive that styles a native <input> or <textarea>.Component EditorRich-text editor whose value is the document as a JSON tree.Component MentionSuggest names or tags while typing @ in a text field.Directive wrAutosizeGrow a <textarea> with its content, between minRows and maxRows.Component Form FieldWraps a form control with a label, a hint and its error messages.Guide FormsBind ngwr controls to any Angular form and show their errors.Component FormA plain layout wrapper for a label, a control and its error.