role textarea
Textarea draft v0.1.0
Lets people enter or edit several lines of text.
A textarea collects free text that may run over several lines: a message, a description, a comment, an address. It shows a chosen number of lines, scrolls beyond them and can be resized. It has a visible label above, an optional description and, when its value fails validation, an error message under it. One line of text is a Text field.
Decisions
From decisions in packages/components/specs/components/textarea.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Color
-
The control is a box on the default surface outlined in the accent neutral border color; hover tints it with the surface hover color and keeps the border; invalid takes the base error border; read-only takes the level 1 surface; disabled takes the shared disabled colors. Value text is primary, the placeholder tertiary, the description secondary, the error message the error text color.
The Figma library maps no color to form controls. The accent neutral border is the lightest neutral border that keeps 3:1 against the surface in both modes (WCAG 1.4.11); the hover tint reuses the surface's own hover step.
field-colors· 2026-10-03 · v0.1.0textarea.control.background.*textarea.control.border-color.*textarea.control.color.*
Size
-
Three sizes from the Figma library's space and body scales: small (32 px high, 8 px inline padding, 14 px text), medium (40, 12, 16, the default) and large (48, 16, 20); the border is 0.6 px (stroke-width.sm) and the corners 4 px (corner-radius.xs) at every size; label, description and error message keep 14 px.
sizes· 2026-10-03 · v0.1.0textarea.control.min-height.*textarea.control.padding-inline.*textarea.control.typography.*textarea.control.border-widthtextarea.control.border-radius
Anatomy
-
A field always has a visible label above the control; help text goes under the control as the description, and the error message under it while the field is invalid. Both are exposed as the control's description.
label-description-error· 2026-10-03 · v0.1.0WCAG 3.3.2 Labels or Instructions (A)WAI tutorials: Labeling controlsWAI tutorials: Form instructions (required fields, placeholder text, aria-describedby)APG: Describing with aria-describedby
Layout
-
The textarea shows the number of lines of its rows property (three by default), with a block padding of 6, 8 or 12 px by size, and people can resize it vertically; it never resizes horizontally.
rows-and-resize· 2026-10-03 · v0.1.0textarea.control.padding-block.*HTML: the textarea element (rows)MDN: the textarea element (label association, rows)