Textarea | Glaze design system

Sizing

The agent refunded a $120 order without asking.
rowsdefault
The agent refunded a $120 order without asking. It also skipped the reason line, so the reviewer had nothing to go on.
autoGrow

rest
Refunded $120 unasked.
focus
Refunded $120 unasked.
4 left
Near the character limit
near limit
Refunded $120 unasked.
6 over the 16 limit
Over the 16 character limit
over limit
Refunded $120 unasked.
disabled
Refunded $120 unasked.
read-only

When to use it

Use: The answer runs past one line: a system prompt, instructions, feedback on a run, a reason.
Use: The text has a soft length limit the person should see coming (limit).
Not for: The answer fits on one line. Use Input.
Not for: The person chats with an agent: use the prompt input, which carries send and attachments.
Not for: The text is code or JSON to read: show it in a code block.

7 rules

Must: Put a Textarea in a Field with a FieldLabel. Because a placeholder vanishes on the first keystroke and is not a reliable accessible name.
Must: Use limit for a length cap, never maxLength. Because maxLength cuts a paste without a word, while limit keeps every character, counts down near the end and marks the field invalid past it.
Never: Make a Textarea a pill or change its corner. Because pills are for one line; a box of text takes the 10px overlay corner, and a pill would clip its first and last lines.
Never: Draw a ring, a black line or a shadow to show focus. Because a field shows focus by darkening its own line to ink at about a third, and a ring reads as a pressable thing.
Should: With autoGrow, set maxRows so a long paste scrolls inside the box instead of pushing the form off the screen.
Should: Leave resizable off when autoGrow is on; the box already fits its text. Because a dragged height fights the grown one on the next keystroke.
Should: Make the placeholder an example of a good answer, not the label again.

7 states, highest first

4 checks

: A native textarea named by FieldLabel, with aria-invalid and aria-describedby from the Field.
: With limit, the counter joins aria-describedby, and a status region announces only crossing 80% and the limit, never every keystroke.
: Focus darkens the line to --line-focus beside the caret; invalid adds the error sentence, so neither rests on colour alone.
: Text is 16px under a coarse pointer, so a phone browser never zooms on focus.

2 keys

6 edge cases

Paste over the limit: Keeps every character, counts how far over in the failure word and marks the field invalid.
Long paste with autoGrow: Grows to maxRows, then scrolls inside the box.
Browser without field-sizing: autoGrow measures scrollHeight on every input instead.
Narrow container: The width follows the container; only the height follows the text.
Right to left: Text and the counter align to the reading direction.
Dark theme: Paper turns near-black and the line stays ink at 15%.

7 props

18 tokens