Textarea

Role and semantics

Textarea renders a native <textarea> inside Base UI Field. The label is bound with <label for>; the help text and error are in aria-describedby. required is both the attribute and the label marker.

Keyboard

Key	Behaviour
Tab	Moves focus to the text area; the next Tab leaves it.
Enter	Adds a new line; it does not submit the form.

Focus

On focus the border becomes color-border-focus and a 2 px color-focus-ring ring is drawn inside the field (focus-visible).

Screen reader output

Example	Output
Required field	“Field label required, edit text, multi-line, required”
Counter near the limit	“8 characters left” after a pause in typing
Over the limit	“2 characters too many”; the field is read as “invalid”

Contrast

Text, placeholder, border and error text are checked by the token contrast test: text at 4.5:1, the input border at 3:1.

WCAG 2.2

Criterion	How Textarea meets it	What the product team does
1.3.1 Info and relationships	<label for> and aria-describedby.	Give every field a label.
1.4.4 Resize text	The height is measured in lines; autoResize grows with the content.	Do not set the height in fixed pixels.
3.3.1 Error identification	aria-invalid and an error in text.	Say what to do when the limit is passed.
4.1.3 Status messages	The counter has role="status".	Turn the counter on only for fields with a limit.