Textarea

A native multiline text control with a stable sizing fallback.

When to use it. Use it when its native HTML meaning matches the caller-owned form requirement.

Native baseline Exact fallback

Textarea primary example

Readonly notes

Profile notes

<.textarea field={@form[:notes]}><:label>Notes</:label></.textarea>

<.textarea> Explicit identity takes precedence over FormField values. Protected identity and ARIA relationships cannot be contradicted through global attributes.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :textarea does not ship them.
application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Visible labels and deterministic help and error relationships preserve the native accessible name and description contract.

Textarea support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	Unsupported browsers keep the fixed native textarea instead of CSS content sizing.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	Unsupported browsers keep the fixed native textarea instead of CSS content sizing.

The application owns changesets, translation, validation timing, submission, persistence, authorization, pending transitions, focus, and outcomes.

Catalogue identity forms.textarea, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt native textarea presentation into a relationship-aware HEEX API with closed resize policy and progressive CSS content sizing.