upp-textarea

A multi-line text input component that integrates with Angular Reactive Forms. It supports configurable row count, kiosk mode, floating labels, and inline validation error display -- mirroring the same patterns as upp-input but for multi-line content.

When to Use

Use upp-textarea for any field where the user needs to enter longer text such as descriptions, notes, or comments. It provides the same form integration, error display, and kiosk support as upp-input, but renders a <textarea> element with a configurable number of rows.

Layout: Wrap upp-textarea in an ion-item so validation errors are positioned correctly (bottom-right). Without ion-item, the error message may not align with the field.

Demo

Source Code

HTML
TypeScript
SCSS

<div class="demo-scroll-container">
    <upp-scrollable [scrollbar]="'y'">
        <div class="demo-content">
            <h2>Product Description</h2>
            <p class="demo-description">Edit a product's text content using <code>upp-textarea</code> with validation and character counting.</p>

            <div class="demo-controls">
    <ion-button size="small" (click)="toggleReadonly()">Readonly: {{ isReadonly }}</ion-button>
    <ion-button size="small" color="warning" (click)="validate()">Validate</ion-button>
    <ion-button size="small" color="medium" (click)="resetForm()">Reset</ion-button>
</div>
            <p class="demo-hint">Validation errors appear when the field is touched (blur) or dirty. Leave the required field empty and blur to see errors.</p>

<div class="demo-section" [formGroup]="form">
    <h3>Product Copy</h3>

    <ion-list lines="none">
        <ion-item>
            <upp-textarea
                formControlName="shortDescription"
                placeholder="A brief summary of the product..."
                title="Short Description (required) &mdash; {{ shortDescriptionLength }} chars"
                [rows]="2"
                [readonly]="isReadonly"
                [kiosk]="false"
                [errornfo]="errorMessages">
            </upp-textarea>
        </ion-item>

        <ion-item>
            <upp-textarea
                formControlName="detailedNotes"
                placeholder="Ingredients, allergens, storage instructions..."
                title="Detailed Notes (optional) &mdash; {{ detailedNotesLength }} chars"
                [rows]="5"
                [readonly]="isReadonly"
                [kiosk]="false">
            </upp-textarea>
        </ion-item>
    </ion-list>
</div>
        </div>
    </upp-scrollable>
</div>

import { Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'demo-upp-textarea',
    templateUrl: './demo-upp-textarea.html',
    styleUrls: ['../demo-common.scss', './demo-upp-textarea.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppTextareaComponent implements OnInit {
    form!: FormGroup;
    isReadonly = false;

    errorMessages: Record<string, string> = {
        required: 'This field is required',
    };

    constructor(private change: ChangeDetectorRef) {
    }

    ngOnInit() {
        this.form = new FormGroup({
            shortDescription: new FormControl('', [Validators.required]),
            detailedNotes: new FormControl(''),
        });
    }

    get shortDescriptionLength(): number {
        return (this.form.get('shortDescription')?.value || '').length;
    }

    get detailedNotesLength(): number {
        return (this.form.get('detailedNotes')?.value || '').length;
    }

    toggleReadonly() {
        this.isReadonly = !this.isReadonly;
        this.change.markForCheck();
    }

    validate() {
        Object.values(this.form.controls).forEach(c => {
            c.markAsTouched();
            c.markAsDirty();
        });
        this.change.markForCheck();
    }

    resetForm() {
        this.form.reset();
        this.isReadonly = false;
        this.change.markForCheck();
    }
}

:host {
    display: block;
    height: 100vh;
}

API Reference

UppTextAreaComponent (`upp-textarea`)

The main textarea component. Wraps upp-kb-textarea (keyboard-level textarea) and upp-er-textarea (inline error display) into a single, form-ready widget.

Inputs

Property	Type	Default	Description
`placeholder`	`string`	`''`	Placeholder text shown when the field is empty.
`formControlName`	`string`	`''`	Name of the reactive form control this textarea binds to.
`readonly`	`boolean`	`false`	When `true`, the textarea is read-only.
`disabled`	`boolean`	`false`	When `true`, the textarea is disabled. Also respects the parent `FormGroup` disabled state.
`kiosk`	`boolean`	`true`	Enables kiosk mode (on-screen keyboard) when the platform reports kiosk.
`rows`	`number`	`1`	Number of visible text rows.
`title`	`string`	`''`	Floating label text displayed above the textarea when it has a value. Falls back to `placeholder` if empty.
`autocomplete`	`string`	`'off'`	HTML autocomplete attribute value.
`errornfo`	`Record<string, string>`	`{}`	Map of validation error keys to human-readable messages.
`value`	`string \| null`	`null`	The current value (two-way via `ControlValueAccessor`).

Outputs

Event	Payload	Description
`Changed`	`string \| null`	Emitted when the value changes.
`Focus`	`void`	Emitted when the textarea gains focus.

When to Use​

Demo​

Source Code​

API Reference​

UppTextAreaComponent (upp-textarea)​

Inputs​

Outputs​