Textarea
canonMulti-line text input that grows with content.
Used in 53 files · 20 areas · 61× — components/accounting, components/agent-desk, components/calendar, components/datamart, components/deal, components/decisions …
Keyboard
- Tab moves focus in and out; Enter inserts a new line (it does not submit).
- The resize handle is pointer-only; there is no keyboard way to change height beyond
rows.
ARIA
- Native
<textarea>— no role. Name it witharia-labelor link it to the<Field>label (id+aria-labelledby);<Field>itself does not sethtmlFor. aria-invalidandaria-describedbyfor the error message must be added by the screen; the DS has no.is-errorrule on the textarea.maxLengthalone gives no feedback — announce the limit in the hint.
Focus
.acrm-textarea:focus=outline: none,border-color: var(--accent),box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); identical to Input.- The foundation focus ring does not apply (inputs are not in its selector list).
Contrast
Same tokens as Input (packages/ui/src/tokens/tokens.css):
- Text
--fgon--surface-100= 17.59:1 (light); on--surface-50= 13.09:1 (dark). - Placeholder
--fg-muted= 2.85:1 (light), 3.27:1 (dark) — below AA. - Border
--border-strong= 1.38:1 (light), 1.55:1 (dark); focus border--accent= 4.44:1 / 3.83:1.
Known limits
- No disabled style — a disabled textarea looks like the browser default and does not get the
--surface-75fill Input has. - No error frame — only the message under the field signals an error.
- Height cannot be changed from the keyboard.
- Placeholder contrast is below AA.
Source: docs/text-field/textarea.a11y.md · GitLab