Textarea

A thin, headless wrapper around the native textarea element with controlled/uncontrolled value support and a string-typed change callback.

Features

Native textarea wrapper
Controlled or uncontrolled
String-based onValueChange
Native onChange support
Forwards refs

Installation

npm install @ariaui/textarea

Examples

Thin wrapper around the native <textarea> with controlled or uncontrolled value and a string-typed onValueChange callback.

The first demo mirrors the legacy doc: label, field, and helper copy. Styling uses shared class strings from textareaExampleTokens.ts. Forward the native disabled prop for locked fields (muted visuals match shadcn / Pro Blocks treatments).

Uncontrolled

Use defaultValue for an initial string; onValueChange receives the latest text on each edit.

Preview

No preview output yet.

live.tsxReady

Controlled

Lift value into React state and pass value plus onValueChange for full control.

Preview

No preview output yet.

live.tsxReady

Disabled

Pass native disabled on Textarea.Root to remove focus and input; pair with muted field styles.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as Textarea from "@ariaui/textarea";

export default function Example() {
  return <Textarea.Root />;
}

API Reference

Root

Renders a native `<textarea>`. Forwards every native prop and pairs the native change event with a string-typed `onValueChange` callback for ergonomic controlled usage. The ref is forwarded to the underlying `<textarea>`.

Prop	Type	Default
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—
onChange	(event: React.ChangeEvent<HTMLTextAreaElement>) => void	—

Accessibility

Textarea renders a native <textarea>, so assistive tech and keyboard behavior match the platform exactly:

Always give Textarea a visible label — pair a <label htmlFor> with the Root's id, or pass aria-label / aria-labelledby directly when a visual label isn't practical.
For help text, link it with aria-describedby so screen readers announce it alongside the field.
For error states, toggle aria-invalid="true" and connect the error message via aria-describedby (or aria-errormessage for stricter tooling).
Use the native required, maxLength, minLength, and disabled attributes — Textarea forwards them untouched, and browsers already handle validation and focus management.
Avoid resize: none without good reason — users often need to enlarge the area to read long content, and removing resize hurts low-vision accessibility.