How to build an accessible Textarea in React

Renders a native <textarea> with aria-multiline; hint and error text are associated via aria-describedby and errors use role="alert" with aria-invalid so assistive tech announces validation state.

When to use a Textarea

• Capturing multi-line free text such as messages, descriptions, or comments
• Input where line breaks are meaningful and the content may wrap to several rows
• Form fields that benefit from a visible hint or validation error beneath the control

When not to use it

• A single short value like a name or email — use Input
• A constrained numeric value — use NumberInput

Keyboard interactions

Role textbox, verified at WCAG 2.2-AA.

• Tab
• Shift+Tab

Common mistakes

Avoid: <Textarea label="Email" rows={1} />

Prefer: <Input type="email" label="Email" />

A one-line value belongs in Input; a textarea invites unwanted line breaks and submits via Enter differently

Example

<Textarea label="Message" placeholder="Type here…" />

See the full Textarea reference →