Textarea

Multiline text entry. Same contract as the input field — the deltas are multiline metrics: relaxed line height and a three-control minimum height. The control is not user-resizable: the native drag handle can pull it out of its container, and the need it answers belongs to auto-grow.

States

The state vocabulary is Input's; only the content wraps.

ExampleStateDriverRolesUsage
Restborder.defaulttext.mutedPlaceholder is never essential content
Rest, filledtext.primaryContent wraps; the box holds its height
Hover:hoverborder.hoverThe border answers the pointer
Focus:focus-visiblefocus.ringThe engaged control — the border takes the focus color, no offset ring
Invalid[aria-invalid]status.error.border.fgPair with an error message via aria-describedby
Read-only[readonly]surface.canvasGenerated content: copyable, not editable
Disabled:disabledaction.disabled.bg.textExcluded from interaction and the tab order
Textarea · Scroll

Content past the height scrolls inside the box. Size the control per project for the content you expect — size.control.md × 3 is only the floor.

Usage notes

A textarea is Input, given room — the deltas are metric, not behavioral.

VerdictRule
DoApply Input's rules unchanged — the label via FormField, the placeholder as a hint, aria-invalid paired with a message via aria-describedby.
DoReserve textarea for genuinely multiline content — a generous-feeling single-line answer belongs in an input.
DoSize the control for the content you expect — min-height (size.control.md × 3) is a floor, not a ceiling, and content scrolls past it.
Don’tGive the resize handle back per instance — dragging pulls the control out of designed layouts, and the need it serves belongs to auto-grow.