Live demo — this example is server-driven; run the showcase locally for the interactive version.

Text area

Multi-line text input. pf-v6-c-form-control pf-m-textarea wrapping a <textarea>, with optional resize controls and validation.

Examples

Basic

Form-control wrapper around a textarea.

Invalid

Error styling with status icon.

Validated

Flips between error and success as you type.

Enter at least 10 characters.

Vertically resizable

pf-m-resize-vertical.

Horizontally resizable

pf-m-resize-horizontal.

Not resizable

No resize handle (resize: none). PF\u2019s "Uncontrolled" section is a React state demo.

Disabled

Native disabled state.

Read only

Selectable but not editable.

Read-only content stays selectable but not editable.

Disabled and read-only together

Both states side by side.

Read-only content

Auto resizing

Grows with its content — Alpine tracks scrollHeight on input.

Documentation

Text area props

Parameters accepted by {#include components/forms/text-area ... /}. Model mode: pass textArea=<TextArea> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	Wrapper id; inner textarea gets `{id}-field`.
`value`	String	Initial textarea contents.
`rows`	Integer	HTML `rows` attribute — visible row count.
`resize`	`vertical \| horizontal \| both`	Resize orientation — emits `pf-m-resize-{resize}`. Omit to use browser default.
`disabled` / `readonly` / `required`	boolean	Standard HTML form attrs.
`validated`	`success \| warning \| error`	Validation state.

Usage

Resize policy. Default to vertical — horizontal resize is rare and breaks responsive layouts.

Auto-resize. PF React has an autoResize prop; we don't ship one. Attach a small Alpine component if you need it.

Edit text-area.html on GitHub