Form

Textarea

A multi-line field on the native textarea — grows with the text, counts characters, looks like every other field.

Features11

API

Theming

Basic

txTextarea on a native textarea; rows sets the starting height.

Auto resize

autoResize grows the field with the text instead of scrolling. maxHeight stops it at a height in px.

9 lines

<textarea    txTextarea    rows="2"    [autoResize]="true"    [maxHeight]="220"    placeholder="Type a few lines — the field grows up to 220px"    aria-label="Message"    [fluid]="true"  ></textarea>

Max rows

maxRows limits growth by rows; (heightChange) reports the new height.

Height: NaNpx

11 lines

<textarea  txTextarea  rows="1"  [autoResize]="true"  [maxRows]="5"  placeholder="Reply…"  aria-label="Reply"  [fluid]="true"  (heightChange)="height.set($event)"></textarea><p class="hint">Height: {{ height() ?? '—' }}px</p>

Resize

resize controls the native handle: vertical (default), none, horizontal or both.

23 lines

<div class="grid">  <textarea    txTextarea    rows="3"    resize="none"    placeholder="resize none"    aria-label="No resize"  ></textarea>  <textarea    txTextarea    rows="3"    resize="vertical"    placeholder="resize vertical"    aria-label="Vertical resize"  ></textarea>  <textarea    txTextarea    rows="3"    resize="both"    placeholder="resize both"    aria-label="Free resize"  ></textarea></div>

Counter

<tx-textarea-counter [for]="ref"> shows length / maxlength and turns red at the limit. The browser enforces maxlength itself.

Short bio

11 lines

<tx-field label="Short bio">  <textarea    txTextarea    rows="3"    maxlength="160"    [autoResize]="true"    [fluid]="true"    #bio="txTextarea"  ></textarea>  <tx-textarea-counter [for]="bio" /></tx-field>

Borderless

borderless drops the border and background — for notes, comments and inline editing. Focus still shows a ring.

Release notes

12 lines

<div class="card">  <strong>Release notes</strong>  <textarea    txTextarea    [borderless]="true"    [autoResize]="true"    rows="2"    placeholder="What changed in this release?"    aria-label="Release notes"    [fluid]="true"  ></textarea></div>

Variants

outlined (default) or filled, like every field.

10 lines

<div class="grid">  <textarea txTextarea rows="3" placeholder="Outlined" aria-label="Outlined"></textarea>  <textarea    txTextarea    rows="3"    variant="filled"    placeholder="Filled"    aria-label="Filled"  ></textarea></div>

States

Native readonly and disabled.

Read only text

4 lines

<div class="grid">  <textarea txTextarea rows="3" readonly aria-label="Read only">Read only text</textarea>  <textarea txTextarea rows="3" disabled aria-label="Disabled">Disabled</textarea></div>

Sizes

small, medium and large.

5 lines

<div class="grid">  <textarea txTextarea rows="2" size="small" placeholder="Small" aria-label="Small"></textarea>  <textarea txTextarea rows="2" placeholder="Medium" aria-label="Medium"></textarea>  <textarea txTextarea rows="2" size="large" placeholder="Large" aria-label="Large"></textarea></div>

Form

With a form control inside tx-field: the label, the error and the invalid state come for free.

Feedback

At least 20 characters.

12 lines

<div class="form">  <tx-field label="Feedback" [required]="true" hint="At least 20 characters.">    <textarea      txTextarea      rows="3"      [autoResize]="true"      [formControl]="feedback"      [fluid]="true"    ></textarea>  </tx-field>  <button txButton (click)="feedback.markAsTouched()">Send</button></div>

Design tokens

[dt] changes the textarea tokens, [fieldDt] the shared formField tokens.

7 lines

<textarea    txTextarea    placeholder="Taller, rounder, teal focus"    aria-label="Custom tokens"    [dt]="{ root: { minHeight: '120px' } }"    [fieldDt]="{ root: { borderRadius: '14px', focusBorderColor: '#0f766e' } }"  ></textarea>