Components/Inputs
Text Area
Text areas let people write longer text across several lines, like a note, a description or feedback
Playground
Playground
Pick a variant, then click into the preview to type
Styles
Styles
Outline sits on white surfaces, Contained fills the field for denser or tinted layouts
Sizes
Sizes
States
States
Focus and Typing use the brand border, Error swaps the border and caption to the error color
Usage
When to use
Use when
- People write free text that can run past one line, like a note or a description
- The answer length varies and people need room to review what they wrote
- There is a character limit, show it with the counter
Avoid when
- The value fits on one line, like a name or an email, use a Text Input
- People pick from known answers, use a Dropdown or a Radio Group
- The content needs formatting like bold or lists, use a rich text editor
Guidance
Do and don’t
Feedback*(Optional)Tell us what worked and what didn’tVisible to the design team only0/200 Characters
Size the field to the answer you expect and show the limit with the counter
Email*(Optional)name@company.comInput caption0/200 Characters
Don’t use a text area for short, single-line values, use a Text Input
Specs
Tokens and specs
PropertyTokenValue
Field height—120 / 80
Frame padding2 px
Text padding10 px sides, 8 px top and bottom
Corner radius8 px
Border#DEDEDE
Focus border#1868D0
Error border and caption#FB3748
Contained fill#F7F7F7
Placeholder#A3A3A3
Value#171717
Resize handle—12 px, bottom right
Value styleInter Regular 14/20
Caption styleInter Regular 12/16
Counter styleInter Regular 10/12