Textarea

New

A native multiline field for messages, notes and longer content.

Native formsAuto resizeFloating label

Overview

Native rows, maxlength, readonly and disabled work as usual.

Message0 / 200 characters

HTMLBasic usage

<textarea avTextarea rows="4" aria-label="Message"
  [(ngModel)]="message" maxlength="200"></textarea>

Auto resize

The field grows with its content and shrinks when cleared. Programmatic changes resize it too. Set a CSS max-height to limit growth.

Notes

HTMLReactive forms

<textarea avTextarea autoResize rows="3"
  [formControl]="notes" aria-label="Notes"></textarea>

Floating label

Summary

Sizes and states

smmdlgFilledDisabledRead only

You can select and copy this text.

Invalid

Please enter a description.

Usage and API

TYPESCRIPTImports

import { AvTextarea, AvFloatLabel } from 'avero-ui';

// Use native input, change and blur events.
// Import FormsModule or ReactiveFormsModule for form bindings.

Inputs: avSize (sm, md, lg), autoResize (false by default), variant (outlined or filled). Use native labels and events, ngModel or formControl.

Theme. Override --av-textarea-background, --av-textarea-border, --av-textarea-radius, --av-textarea-color and --av-textarea-focus in your own styles.