Textarea

Multiline text control with a public value model, resize options and Signal Forms binding.

Category: Forms and selection
Import: @neural-ui/core/textarea
Selector: neu-textarea

import { NeuTextareaComponent } from '@neural-ui/core/textarea';

Overview

NeuTextarea wraps a native multiline textarea with a public value model. Rows, resize policy, label, hint and error presentation are component inputs; form validation remains external.

Basic multiline value

Bind value to an application signal. Typing updates the model; external writes update the textarea.

Delivery notesAdd useful context for the team

Characters: 0

Configurator

Adjust size and rows, automatic height and manual resizing. Try readonly, disabled and validation states in the preview and generated code.

Live preview

Notes

Current application value

Advanced options · 11

Generated template. The Code tab includes imports and state.

<neu-textarea
  [(value)]="text"
  label="Notes"
  size="md"
  [rows]="3"
  [autoResize]="false"
  [resizable]="true"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const text = signal("");

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

errors · readonly ValidationError.WithOptionalFieldTree[]

In Source: define errors with this type and use [errors]="errors" (or errors() for a signal).

pattern · readonly RegExp[]

In Source: define pattern with this type and use [pattern]="pattern" (or pattern() for a signal).

autoResize grows to content; resizable controls manual vertical resizing when autoResize is off. Disabled blocks focus and edits; readonly remains focusable while blocking edits. The demo uses real inputs outside FormField.

Reviewable notes

Applied characters: 11

Signal Forms

Connect FormField to value. Define required and minimum-length rules in the form schema, then try editing and resetting the field.

Signal Forms foundation · State ownership

Reason for change

touched: false · dirty: false · valid: false

Validation and error state

Define validation in your form schema and supply errorMessage for visible feedback. Core reflects invalid state and associates the feedback with the field.

pattern carries FormValueControl validation metadata. A native textarea does not perform HTML pattern validation: use a form-schema pattern rule or your application's validator; setting this input alone does not validate the text.

Model ownership and events

Bind [(value)] to the application's text signal. Listen to touch only if you need to react to blur. Reset the application value or form field to change the text.

Accessibility and keyboard

Core connects the label, hint and error message to the native textarea and reflects form state. Enter inserts a line break; readonly fields remain focusable.

Your application supplies a useful label, validation rules and actionable error text. Do not use placeholder as the only label.

Accessibility foundation

Key	Action
`Enter`	Inserts a line break in the focused native textarea.
`Tab`	Moves focus onward rather than inserting a tab character.

API

value holds the editable text; touch reports blur. Presentation and form-state inputs are listed separately from these editing and notification contracts.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs of elements describing the native textarea, separated by spaces. Use this for help or validation messages.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible name for the native textarea when its visible label is not sufficient.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	IDs of elements naming the native textarea, separated by spaces.
`autoResize`	`boolean`	`false`	`[autoResize]`	Grows the textarea to its content and disables manual resize.
`dirty`	`boolean`	`false`	`[dirty]`	Applied dirty state, normally supplied by FormField.
`disabled`	`boolean`	`false`	`[disabled]`	Disables the native textarea and removes it from focus.
`errorMessage`	`string`	`''`	`[errorMessage]`	Explicit visible error text when error state is present.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Applied validation errors, normally from the form schema.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the component host.
`hint`	`string`	`''`	`[hint]`	Help text linked to the native textarea until a visible error replaces it.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-textarea-')`Derived default	`[inputId]`	ID shared by the native textarea and its label/help references.
`invalid`	`boolean`	`false`	`[invalid]`	Applied invalid flag; it does not validate text itself.
`label`	`string`	`''`	`[label]`	Visible label associated with the native textarea.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Native maximum text length.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Native minimum text length; schema validation is separate.
`name`	`string`	`''`	`[name]`	Native form-control name.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	FormValueControl pattern metadata. Define validation in the form schema; a native textarea does not validate HTML pattern.
`pending`	`boolean`	`false`	`[pending]`	Applied pending state announced through aria-busy.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the native textarea focusable while blocking edits.
`required`	`boolean`	`false`	`[required]`	Marks the native textarea required; schema validity comes from the form.
`resizable`	`boolean`	`true`	`[resizable]`	Allows manual horizontal and vertical resize within the container when autoResize is off.
`rows`	`number`	`3`	`[rows]`	Initial native row count.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	`[size]`	Small, medium or large control size.
`touched`	`boolean`	`false`	`[touched]`	Applied touched state, normally supplied by FormField.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`string`	`''`	`[(value)]`	Bidirectional multiline text model owned by the application or FormField.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`touch`	`void`	`(touch)="onTouch($event)"`	Lifecycle notification emitted when the textarea blurs.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Theming

Textarea has no dedicated public --neu-textarea-* token. Use the global Core theme and the Themes guide to customize shared colors and appearance.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-border-focus`	Focused control border	Shared by other Core consumers; scope the override.	`var(--neu-primary)`
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-error-text`	Error text and danger outline/ghost Button text in both themes	Shared by other Core consumers; scope the override.	`#991b1b`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-focus-ring-alpha`	Opacity of the semantic focus ring	Shared by other Core consumers; scope the override.	`25%`
`--neu-focus-ring-width`	Ring thickness, including invalid focus	Shared by other Core consumers; scope the override.	`3px`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`