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.
Every example on this page is the real component, not a picture. Type, click and tab to try it. Figma: Text Area.
Choose a breakpoint and state and the field and its code update. Hover and focus are forced here so they can be seen; type in the field to get the Active state and see the word count change.
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. It has a label, an optional word count, a resizer and a message that explains or validates the value.
Text area has one size and seven states. The user can drag the corner to make the field taller.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a text area. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to add one to a page.
Use a text area when the user writes more than a short value. Use it to:
A name, a number or a search term fits on one line. Use eco-input: a text area suggests that a long answer is expected.
An invalid field says what is wrong in the message, with the error icon. A red border alone is easy to miss and is not enough for everyone.
| The user… | Use |
|---|---|
| writes a comment, feedback or a longer passage | Text area |
| types a short value: a name, a number, a search term | eco-input |
| picks one value from a fixed list | eco-select |
| picks one of two or three options | eco-radio |
maxlength to match.label-md (mobile label-sm), uppercase, 4px above the box.body-sm, right-aligned on the label row. Optional.body-md, 12px padding, 66px minimum height. The placeholder is text-tertiary.body-sm, 4px below the box. Hint, error or success.The focus ring is a separate element around the box, 2px and 3px outside it, so focusing never changes the layout or the box size.
A text area has no size or type variants. What changes is the word count and the message.
The word count sits on the label row, on the right. Use it when the text has a limit (maxlength); leave it out when there is none.
The message sits below the field, in body-sm. Hint text is neutral; error and success change the color of the border and the message. An error message has a leading icon so color is never the only signal.
There is one size. Figma defines only the Desktop version; below 769px the label and text use the smaller mobile type styles (same as the input). The component switches by itself; the Breakpoint toggle forces one for preview. Measurements are under Sizes in Specifications.
The field fills its container: set the width on the container, not on the field. In the examples on this page the container is 360px or narrower.
The box has a 1px border and a white fill, with 12px padding. The border turns black when the field has a value, and the message and the border turn red or green for error and success. The focus ring is a 2px blue frame around the box. Token names and values are under Design Tokens in Specifications.
When the user types a value the field becomes Active (black border). The word count updates; maxlength stops typing at the limit.
The user can drag the corner handle to make the field taller (vertical only). It never goes below the 66px minimum. A disabled field cannot be resized.
Hover changes the border. The blue ring shows on keyboard focus only (body.keyboard-nav, set by a small script). All states are listed under States in Specifications.
Set aria-invalid="true" on an invalid field and point aria-describedby at the message.
A disabled field is not focusable. It has a grey fill, a light border, text-disabled for the text and the message, and no resize.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves into and out of the field. The focus ring shows on keyboard focus only. Add the keyboard script once per page (see Code).
Every field has a label with for and id. A placeholder is never the label. An invalid field gets aria-invalid="true" and aria-describedby that points at the message.