Toolbar
Beta

Textarea

Native textarea directive for Frakton fields. Use textarea[fktTextarea] inside fkt-field when the user needs a multi-line text control with field state integration, auto-expand, and optional character count support.

Import

import {FktTextareaDirective} from "frakton-ng/textarea";

Composition

Textarea composition patterns. The textarea directive owns the native multiline control state, while fkt-field owns label, outline, hint, error, density, prefix/suffix, and supporting text.

Basic

Basic usage with textarea[fktTextarea] projected into fkt-field. Native textarea attributes such as rows, placeholder, spellcheck, readonly, and disabled stay on the native element.


    



    

    
        Markdown support depends on the consumer application.

Auto expand

Auto-expand keeps the field compact initially and grows the textarea vertically as content wraps or new lines are added. Use this for comments, notes, descriptions, and support messages.

Character count

Character count is provided by fktCharacterCount. The directive reads the max length from the same normalized field state used by input text, so Signal Forms, Reactive Forms, and native maxlength can share the same field supporting UI.

Forms

Form integration examples. The textarea directive participates in the same FktFieldControl contract as input text, so the field can react to value, focused, disabled, touched, invalid, required, errors, and max length without manual state forwarding.

Signal forms

Signal Forms integration through Angular's [formField] directive. Validation state, disabled state, required marker, and max length are read from the projected control.

Reactive forms

Reactive Forms integration through formControlName. The field reacts to programmatic updates, reset, disabled state, and validation changes from the Angular control.

Textarea

Import

import { FktFieldComponent } from 'frakton-ng/field';
import { FktTextareaDirective } from 'frakton-ng/textarea';

Usage Model

fktTextarea is a directive for the native <textarea> element. It is designed to be projected inside fkt-field, keeping the native control open for browser attributes, forms, i18n, and third-party directives while the field owns the visual shell.

<fkt-field label="Description">
    <textarea
        fktTextarea
        rows="4"
        placeholder="Describe the item..."
    ></textarea>
</fkt-field>

Field Integration

The textarea implements the same field-control contract as fktInputText. The field can read value, focus, disabled, touched, invalid, required, error, and max-length state from the projected textarea without the consumer forwarding those flags manually.

Auto Expand

Use autoExpand when the textarea should grow vertically as content changes. This is useful for comments, notes, descriptions, and message boxes that should start compact.

<textarea fktTextarea autoExpand rows="2"></textarea>

Character Count

Use fktCharacterCount from frakton-ng/field when the field should render a max-length counter in the hint end area. The max length is inferred from Signal Forms, Reactive Forms, or the native maxlength attribute when available.

<fkt-field label="Bio">
    <textarea
        fktTextarea
        fktCharacterCount
        [formField]="form.bio"
    ></textarea>
</fkt-field>

API