Textarea

Multi-line text field. Renders a real <textarea>, so rows, value, onChange, maxLength and ref pass straight through.

Props

Prop	Values	Default	Description
`invalid`	boolean	`false`	Applies the danger border and sets `aria-invalid`.
`className`	string	`""`	Appended after the component's own classes.

All other <textarea> attributes are forwarded.

Common patterns

<Textarea rows={6} value={notes} onChange={(e) => setNotes(e.target.value)} />

// Let it grow with the content instead of scrolling
<Textarea className="field-sizing-content max-h-64" />

Notes

There is no size prop, because a textarea is sized by rows and by whatever height you give it — two different controls for the same thing would only disagree with each other.

field-sizing-content is the modern way to auto-grow a textarea without a resize observer. It has no JavaScript cost and degrades to a normal fixed height in browsers that don't support it.