Textarea

A textarea takes several lines of text in a form: a description, a note, instructions for an agent. It has the same ink border and states as an Input, is at least three lines of field text high (96px on a phone, 90px on a desktop), and people can drag it taller.

When to use

Anatomy

• Textarea: the field. Required.
• TextareaGroup: holds the textarea and its counter. Needed only with a counter.
• TextareaCounter: the count and the limit, below the field at its end (72/280).

States

• Invalid: data-invalid gives the textarea a danger-strong border; the message goes in the field (Field).
• Over the limit: the counter turns bold danger-strong once the count passes the limit.
• Disabled: the shared disabled look (States), and it can no longer be resized. Disabled wins over invalid.

Behavior

• Let people drag the textarea taller. It never gets shorter than three lines of field text.
• To make it grow with its content, use field-sizing-content together with a maximum height, so a long draft scrolls inside the field instead of pushing the page down.
• Add a counter when the value has a limit. Pass the current value and the limit to TextareaCounter.
• Leave out the native maxLength when the counter shows the limit: maxLength stops typing at the limit, so the counter could never show that the text is over it.

Accessibility

Textarea renders a native <textarea>; it is not a Base UI control.

• Name it with a FieldLabel whose htmlFor matches the textarea's id (Field).
• data-invalid also sets aria-invalid.
• Reference the counter from aria-describedby when the limit matters, so it is read with the field.