A text area lets the user enter text over multiple lines: comments, feedback or longer passages that need more room than a single-line input.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Text Area.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Breakpoint | Min height | Padding | Label | Text | Word count, message |
|---|---|---|---|---|---|
| Desktop (769px+) | 66px | 12px | label-md 16/16, 0.48px | body-md 17/24, 0.32px | body-sm 14/20, 0.36px |
| Mobile (below 769px) | 66px | 12px | label-sm 12/12, 0.48px | body-md 16/22, 0.32px | body-sm 14/20, 0.36px |
There is one size. Figma has no Size axis and only a Desktop version, so the mobile type values are taken from eco-input (same label and body styles) until a Mobile frame exists.
Padding of the text area. The shaded area is the padding; the lines show its value. It is the same at every breakpoint.
| Attribute | Value |
|---|---|
| Padding | 12px on every side |
| Minimum height | 66px (a literal: there is no token) |
| Border | 1px |
| Corners | Square |
| Width | Fills the container |
| Resize | Vertical only, never below 66px |
The same padding and distances as spacing tokens.
| Part | Value |
|---|---|
| Padding | space-12 |
| Label row to box | space-4 |
| Box to message | space-4 |
| Label to word count | space-8 minimum |
| Focus ring | 2px line, 3px outside the box |
All seven states from Figma, with and without the word count. Hover and focus are forced on this page; in your code they come from :hover and keyboard focus. Active means the field has a value.
| State | With word count | Without word count |
|---|
| Part | Type | Size / line height | Letter spacing | Weight |
|---|---|---|---|---|
| Label, Desktop | label-md | 16/16 | 0.48px | Bold, uppercase |
| Label, Mobile | label-sm | 12/12 | 0.48px | Bold, uppercase |
| Text, Desktop | body-md | 17/24 | 0.32px | Regular |
| Text, Mobile | body-md | 16/22 | 0.32px | Regular |
| Word count, message | body-sm | 14/20 | 0.36px | Regular |
Breuer Condensed with ss02 and ss03 (the text and the message also ss06).
| Element | Class | Notes |
|---|---|---|
| Field | form-field | Label row, wrapper and message in a column, 4px apart. |
| Label row | form-field__head | Label on the left, word count on the right. |
| Label | form-label | Uppercase. |
| Word count | form-count | Optional. 0/100 format. |
| Wrapper | input-wrap | Carries the focus ring (2px, 3px outside the box). |
| Text area | form-textarea, --error, --success | The native textarea. Border, fill and height. |
| Message | form-helper, --error, --success, --disabled | Optional icon (input-icon). |
There is one type. The word count is optional.
The field fills its container.
| Property | Duration | Easing |
|---|---|---|
opacity of the focus ring | duration-fast-3 | ease-standard |
| Input | Result |
|---|---|
| Type a value | The field becomes Active (black border). The word count updates; maxlength stops typing at the limit. |
| Drag the corner | The field grows or shrinks in height only. It never goes below the 66px minimum. |
| Tab | The blue ring shows on keyboard focus only (body.keyboard-nav, set by a small script). |
| Disabled | Not focusable. Grey fill, light border, text-disabled for text and message, no resize. |
| Topic | Requirement |
|---|---|
| Label | Always a label with for and id. A placeholder is never the label. |
| Error | Set aria-invalid="true" and point aria-describedby at the message. |
| Focus | A 2px ring on keyboard focus (border-focus), not on mouse click (WCAG 2.4.7, 1.4.11). |
| Color | Error and success are not shown by color alone: the message says it, and the error message has an icon. |
| Disabled | Not focusable. Disabled tokens are exempt from contrast requirements. |
Open points: Figma has only a Desktop version, so the mobile type values are taken from the input. Disabled uses border-primary and focus uses a text-secondary placeholder, both as in Figma and both different from the input. The resizer is the browser’s own handle, not the 8px Figma icon. Details are in the skill’s Flags.