Textarea

A labelled multiline text field for notes, prompts and descriptions, with helper and error rows.

When to use

• Longer free text: descriptions, release notes, system prompts, feedback.
• Pair maxLength with a description like "152 characters left" to get a rolling counter.
• Not for one-line values (use Input) or a chat message box with send controls (use PromptBar, or ChatThread for a whole conversation).

Usage

import { Textarea } from "@/components/iris/textarea/textarea";
const MAX = 280;
function PromptField() {
  const [text, setText] = React.useState("");
  return h(Textarea, {
    label: "Brief",
    rows: 4,
    maxLength: MAX,
    value: text,
    onChange: (e) => setText(e.target.value),
    description: `${MAX - text.length} characters left`,
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label tied to the textarea.
description	string	–	Helper copy under the field, linked through aria-describedby.
error	string	–	Error copy; sets aria-invalid and renders in a role="alert" row.
...props	TextareaHTMLAttributes<HTMLTextAreaElement>	–	Forwarded to the native textarea (ref, rows, value, onChange, maxLength…).

Notes

• Minimum height is 110px and the control resizes vertically only.
• Helper and error rows open their height on a spring and changed words blur in; numbers in the copy (such as a character count) roll digit by digit. With prefers-reduced-motion the rows mount at full height and words only crossfade.
• Reads --surface, --line-strong, --ink-3, --red, --radius-control.