Textarea

Textarea — a text control for more than one line; the box grows with what is typed.

Beta · Forms · packages/css/src/components/textarea.css

.pui-textarea — Input’s chrome, min-height 64, grows with the text (field-sizing: content).

Textarea — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Placeholder and Value are separate text properties — toggle Has placeholder / Has value; the value wraps and the control hugs it above the minimum
• One size. No icon slots
• Five states: default, hover, focus, error, disabled
• Belongs inside a Field — label, helper and error text live there

Use when free text longer than a line — a message, a description, a note.

Do not use when one line is enough (Input); the text is formatted (a rich editor, not in this system); the value is a choice (Select).

Relates to Input (same chrome), Field (parent), Input group.

Anti-patterns a fixed-height box that scrolls inside a form · a placeholder as the only label · a character limit that is not shown · a resize handle that breaks the form column.

Keywords: textarea, multi-line, message, comment, notes

Figma — page Textarea: Textarea (5 variants)

shadcn: textarea

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens textarea.css.

<textarea class="pui-textarea" rows="3" aria-label="Notes" placeholder="Notes"></textarea>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

3 of 3 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).