docs / core / textarea

Textarea

text that runs past one line. same surface, focus ring and invalid state as Input, and it can grow with what you type.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

under a Label, inside a FieldGroup, with FieldCount for a limitautoGrow with a maxRows, so a long answer never eats the pagenot for one line. that is an Input, however wide you make itautoGrow without maxRows in a short form. it will run off screen

a11y

a native <textarea>, named by a Label or aria-label · aria-invalid paints the danger state · autoGrow only changes height, never focus or caretjest-axe
live demo · try it out
customize
placeholderhint text, never a label
valuethe starting text
autoGrowgrow with the content instead of scrolling
minRowsshortest it ever gets
3
maxRowswhere it stops growing and starts scrolling
10
invalidsets aria-invalid, paints danger
disableddims to 50%, not-allowed cursor
usagecopy
import { Textarea } from "@usva-ui/react/primitives/textarea";

<Textarea placeholder="Tell us about yourself…" rows={3} />

props

proptypedefaultnotes
autoGrowbooleanfalsegrows with the content instead of scrolling. off by default, so height stays yours.
minRowsnumber2shortest the field ever gets. also seeds the rows attribute under autoGrow.
maxRowsnumber—where growing stops and scrolling starts. unbounded when unset.
aria-invalidbooleanfalsedanger border and ring for the field the error text points at.
disabledbooleanfalsedims to 50% with a not-allowed cursor.
…TextareaHTMLAttributesReact.TextareaHTMLAttributes—every native textarea attribute passes straight through.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Textarea } from "@usva-ui/react/primitives/textarea";

<Textarea placeholder="Tell us about yourself…" rows={3} />
<Textarea autoGrow minRows={2} maxRows={10} />
<Textarea aria-invalid defaultValue="Too short." />
<Textarea disabled defaultValue="Read only for now." />