Textarea | Sodium design system

Sizing

Rolled back after the schema change dropped a column the billing export reads.
rowsdefault
Rolled back after the schema change dropped a column the billing export reads. The export resumes once the column is back.
autoGrow

rest
hover
Rolled back after a schema change.
focus
Rolled back after a schema change.
6 left
Near the character limit
near limit
Rolled back after a schema change.
10 over the 24 limit
Over the 24 character limit
over limit
Rolled back after a schema change.
disabled
Rolled back after a schema change.
read-only

When to use it

Use: The answer runs past one line: a run note, a reason for a rollback, a description of a pipeline.
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 text is code, SQL or JSON to edit: use a code editor, which keeps indentation and mono.

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: Round the corners or change the edge of a Textarea. Because every corner in Sodium is square, and the edge is the one that turns gold on focus and red when invalid.
Never: Draw a ring, an outline or a shadow to show focus. Because a field shows focus itself, white with the gold edge doubled inward and a 1px pale yellow halo, and a ring outside that reads as a second box.
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.

8 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 turns the edge --focus at 2px 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: The body is #181715 and lifts a step under the pointer; focus turns it the page with a yellow edge.

7 props

22 tokens