Component · 07

Textarea

The multi-line sibling of Input: flat, ruled, and a plain textarea underneath.

Default

Always give it a label.

Message

tsx

<label>
  Message
  <Textarea placeholder="Tell us what happened" />
</label>

Invalid and disabled

Tie the message to the field with aria-describedby so screen readers announce it.

MessageWrite at least 20 characters.

Notes

tsx

<Textarea invalid aria-describedby="msg-error" defaultValue="Hi" />
<p id="msg-error">Write at least 20 characters.</p>

<Textarea disabled defaultValue="Locked while we review." />

Props

Prop	Type	Default	Description
invalid	boolean	false	Red border and aria-invalid. Pair it with a visible message.
rows	number	4	Visible lines before it scrolls. Users can still resize it vertically.

All other props of <textarea> (including ref) are passed through.