# Textarea
Use `ui-textarea` for notes, comments, descriptions, summaries, and any input that needs more vertical room than a single-line field. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while exposing multiline-specific sizing through `rows`.
## Import
```ts
import { TextareaComponent } from 'ui';
```
## Basic multiline fields
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-basic-demo',
standalone: true,
imports: [FormsModule, TextareaComponent],
template: `
General notes
Good default for comments, descriptions, and longer form answers.
Editable summary
Useful when a longer value is already present and needs refinement.
`,
})
export class TextareaBasicDemoComponent {
protected summary =
'Release includes drawer motion tuning, breadcrumb responsive fixes, and search showcase updates.\nKeep the summary short and scannable.';
}
```
## Layout, size, and rows
```ts
import { Component } from '@angular/core';
import { TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-layout-demo',
standalone: true,
imports: [TextareaComponent],
template: `
Primary writing area
`,
})
export class TextareaLayoutDemoComponent {}
```
## Readonly, disabled, and inline error states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-states-demo',
standalone: true,
imports: [FormsModule, TextareaComponent],
template: `
`,
})
export class TextareaStatesDemoComponent {
protected readonlyValue =
'Customer reported a blocking checkout issue.\nEscalated to payments team.\nWaiting for retry confirmation.';
protected draftNote = 'Too short';
protected get draftError(): string {
const value = this.draftNote.trim();
if (!value.length) {
return '';
}
return value.length < 20 ? 'Add a bit more context before saving.' : '';
}
}
```
## Validation with reactive forms
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-validation-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, TextareaComponent],
template: `
`,
})
export class TextareaValidationDemoComponent {
protected readonly feedbackForm = new FormGroup({
reason: new FormControl('', {
nonNullable: true,
validators: [Validators.required, Validators.minLength(20)],
}),
});
protected get reasonError(): string {
const control = this.feedbackForm.controls.reason;
if (!control.touched && !control.dirty) {
return '';
}
if (control.hasError('required')) {
return 'Reason is required.';
}
if (control.hasError('minlength')) {
return 'Use at least 20 characters.';
}
return '';
}
protected markTouched(): void {
this.feedbackForm.markAllAsTouched();
}
protected fillExample(): void {
this.feedbackForm.controls.reason.setValue(
'Escalating because the incident affects multiple enterprise customers and blocks checkout.',
);
this.feedbackForm.controls.reason.markAsTouched();
}
}
```
## Brief authoring form
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-form-demo',
standalone: true,
imports: [ButtonComponent, ReactiveFormsModule, TextareaComponent],
template: `
`,
})
export class TextareaFormDemoComponent {
protected readonly defaults = {
summary: 'Refresh the project detail view and reduce visual noise around the activity panel.',
context:
'Users struggle to scan the current panel because metadata, comments, and actions sit at the same visual weight.',
handoff: 'Keep the layout compatible with existing drawer and tabs patterns.',
};
protected readonly draftForm = new FormGroup({
summary: new FormControl(this.defaults.summary, { nonNullable: true }),
context: new FormControl(this.defaults.context, { nonNullable: true }),
handoff: new FormControl(this.defaults.handoff, { nonNullable: true }),
});
protected reset(): void {
this.draftForm.reset(this.defaults);
}
}
```
## Review feedback panel
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, TextareaComponent } from 'ui';
@Component({
selector: 'app-textarea-feedback-panel-demo',
standalone: true,
imports: [ButtonComponent, FormsModule, TextareaComponent],
template: `
Review feedback panel
A realistic textarea surface usually combines guidance, enough writing space, and the next
action in one focused card.
Send feedbackSave draft
`,
})
export class TextareaFeedbackPanelDemoComponent {
protected feedback =
'The overall direction is solid. Please tighten the spacing in the stats section and clarify the empty state copy before the next review.';
}
```
## Accessibility
### Label and description
Prefer a visible `label` so the purpose of the multiline field is explicit, especially when several writing areas appear in the same view. Help and error text contribute through the standard field description model.
### Keyboard and editing model
This is a native multiline text input, so users rely on standard textarea behavior for typing, selection, line breaks, and cursor movement.
| Aspect | Behavior |
| --- | --- |
| focus | native textarea receives focus |
| typing | native multiline editing behavior |
| Enter | inserts a new line |
| Tab | moves focus according to normal document order |
| readonly / disabled | editing is blocked, but readonly content remains visible |
### Rows and visible space
`rows` affects the visible writing area only. It does not limit content length, so if the flow needs length rules or character guidance, pair the textarea with helper text or form validation.