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.

Demo

Source Code

HTML

<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>

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

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

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

TypeScript

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();
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

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.