Forms

Textarea

@xui/textarea

A styled native <textarea>. ngModel/formControl, validation and the invalid-and-touched error styling all come from Angular's own textarea support — the directive only dresses it and, with autoResize, grows it.

Install

pnpm add @xui/textarea

Add the barrel to a standalone component's imports:

import { XuiTextareaImports } from '@xui/textarea';

@Component({
  imports: [XuiTextareaImports],
  // …
})

Examples

Default

Loading preview…

<textarea xuiTextarea class="w-96" placeholder="Write a note…"></textarea>

Small

Loading preview…

<textarea xuiTextarea size="sm" class="w-96" placeholder="Small"></textarea>

Auto resize

Loading preview…

<textarea xuiTextarea autoResize class="w-96" [(ngModel)]="text"></textarea>

API

XuiTextarea

directive

textarea[xuiTextarea]

Styles a native <textarea> and, on request, grows it to fit its content.

Variants

Axis

Options

Default

size

md

resize

true

false

true

Inputs

Name

Type

Default

class

ClassValueThe user-defined classes. Merged last so they win over the variant classes.

''

size

XuiTextareaVariants['size']Padding and font size, from the shared control scale, so the box matches an input of the same size.

this.config.size

autoResize

booleanGrow to fit the content instead of scrolling; disables manual resize.

false

Methods

resize(): voidPin the height to the content. Public so a consumer can call it after setting the value in code.

Source

libs/ui/textarea/xui