Text Area Component

Multi-line text input field with auto-resize capability

Home | Components | Rules & Guidelines | GitHub Repository

Overview

The Text Area component provides a multi-line text input field with various customization options. It supports features like auto-resize, different sizes and appearances, and integrates with Angular forms.

Import

Import the text area component from the angular-awesome package:

// Import the text area component
import WaTextareaComponent from 'angular-awesome';

API Reference

WaTextareaComponent

Input Type Default Description
label string undefined Label text for the textarea
hint string undefined Hint text displayed below the textarea
placeholder string undefined Placeholder text displayed when the textarea is empty
rows number undefined Number of visible text lines
resize string undefined Resize behavior: 'none', 'vertical', 'horizontal', 'both', 'auto'
size string undefined Size of the textarea: 'small', 'medium', 'large', 'inherit'
appearance string undefined Appearance style: 'filled', 'outlined'
name string undefined Name attribute for the textarea
required boolean undefined Whether the textarea is required
minlength number undefined Minimum length of text
maxlength number undefined Maximum length of text
readonly boolean undefined Whether the textarea is read-only
disabled boolean undefined Whether the textarea is disabled
withLabel boolean undefined Whether to show the label
withHint boolean undefined Whether to show the hint
autocapitalize string undefined Autocapitalize behavior: 'off', 'none', 'on', 'sentences', 'words', 'characters'
autocorrect string undefined Autocorrect behavior
autocomplete string undefined Autocomplete behavior
autofocus boolean undefined Whether the textarea should automatically get focus
enterkeyhint string undefined Hint for enter key behavior: 'enter', 'done', 'go', 'next', 'previous', 'search', 'send'
spellcheck boolean undefined Whether to enable spell checking
inputmode string undefined Input mode: 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'

Styling Inputs

Input Type Description
backgroundColor string Background color of the textarea
borderColor string Border color of the textarea
borderWidth string Border width of the textarea
boxShadow string Box shadow of the textarea

Events

Event Description
focusEvent Emitted when the textarea receives focus
blurEvent Emitted when the textarea loses focus
inputEvent Emitted when the textarea value changes (on each keystroke)
changeEvent Emitted when the textarea value is committed (on blur)
invalid Emitted when the textarea validation fails

Examples

Basic Usage

<waTextarea placeholder="Enter your message"></waTextarea>

With Label and Hint

<waTextarea
  label="Message"
  hint="Please enter a detailed description"
  placeholder="Enter your message"
></waTextarea>

Different Sizes

<waTextarea size="small" placeholder="Small textarea"></waTextarea>
<waTextarea size="medium" placeholder="Medium textarea"></waTextarea>
<waTextarea size="large" placeholder="Large textarea"></waTextarea>

Different Appearances

<waTextarea appearance="filled" placeholder="Filled textarea"></waTextarea>
<waTextarea appearance="outlined" placeholder="Outlined textarea"></waTextarea>

Resize Options

<waTextarea resize="none" placeholder="No resize"></waTextarea>
<waTextarea resize="vertical" placeholder="Vertical resize"></waTextarea>
<waTextarea resize="horizontal" placeholder="Horizontal resize"></waTextarea>
<waTextarea resize="both" placeholder="Both directions resize"></waTextarea>
<waTextarea resize="auto" placeholder="Auto resize"></waTextarea>

Validation

<waTextarea
  required="true"
  minlength="10"
  maxlength="100"
  placeholder="Required field (10-100 characters)"
></waTextarea>

States

<waTextarea placeholder="Normal textarea"></waTextarea>
<waTextarea disabled="true" placeholder="Disabled textarea"></waTextarea>
<waTextarea readonly="true" placeholder="Readonly textarea"></waTextarea>

Custom Styling

<waTextarea
  backgroundColor="#f0f8ff"
  borderColor="#0066cc"
  borderWidth="2px"
  boxShadow="0 2px 4px rgba(0,0,0,0.1)"
  placeholder="Custom styled textarea"
></waTextarea>

With ngModel

<waTextarea [(ngModel)]="message" placeholder="Enter your message"></waTextarea>

<p>Message preview here</p>

With Event Handling

<waTextarea
  placeholder="Enter your message"
  (focusEvent)="onFocus($event)"
  (blurEvent)="onBlur($event)"
  (inputEvent)="onInput($event)"
  (changeEvent)="onChange($event)"
  (invalid)="onInvalid($event)"
></waTextarea>