Overview
Related components
Text area - A form field that allows multiple lines of free-form text.
Content
Label
Labels make text fields accessible and easy to scan. They must be clear, concrete and short.
- Content pattern: Noun, adjective + noun
- Edge case: verb + noun. Example: Repeat password.
Copy guidelines
- Sentence case
- Ideal: 1-3 words (up to 15 characters)
- Concrete and clear, think of things
- Never truncate a labelAvoid using the “no label” variant. If you must use it, use a leading icon and ensure surrounding content makes it clear.
Placeholder
Use placeholder text to show the format in which a specific input needs to be entered. E.g.: 555-555-5555 (phone number), USD 100.00.
Copy guidelines
- Sentence case
- Ideal: 1-3 words (up to 15 characters)
- Account for localization when offering placeholder text (for example, different countries have different phone numbers)
- Don’t start with e.g., eg., ex:, etc.
Info message
Use an info message to explain what a label means via a tooltip.
Copy guidelines
- Sentence case
- Ideal: 1 sentence (50 characters) / Don’t wrap over 2 lines on desktop.
- Consider if there’s any way to make the label clearer before adding an info message
- Use contractions where it applies to make it sound closer and more conversational.
Hints
Use the hint to:
- Give additional information or context to enter information. Note: aim to have a clear enough label so that no helper text is needed.
- Add delight to using our product
Copy guidelines
- 2 sentences max length
- Keep it short and concise
- Use contractions where it applies to make it sound closer and more conversational
- If 1 sentence, don’t end in period. If 2 sentences, end in period.
Errors
Use error messages to give context about what went wrong and how to correct the issue.
- For simple errors or input format errors, speak directly to how to fix it.
- For complex errors, mention what’s wrong first and how to fix it second.
Copy Guidelines
- 2 sentences max length
- 2 lines of wrapping max
- Keep it short, concise, and empathetic. Give users a way to fix this.
- If 1 sentence, don’t end in period. If 2 sentences, end in period.
Types
Security
Auto-hide certain secure entries from users, such as passwords. Use a bullet/dot to hide text a few seconds after the user enters it.
Success
The success state is super rare. Predominantly used in password flows.
Auto-formatting & auto-advance
- Auto-format: for inputs with certain common formats, like social security numbers and phone numbers, include those formats in the input. For example: only allow numbers to be entered, add parenthesis and dashes for the user.
- Auto-advance: for input fields that have multiple parts, like verification code pins, auto-advance between each part.
Read-only vs disabled
Use read-only when paired with the option to edit, either with an edit icon button or an edit button. Disabled is reserved for options that can’t be edited in the UI.
Placement
Horizontal
Space selects and text fields 16px apart.
Vertical
Space selects and text fields 40px apart.
Labels
Labels can be placed on top, side or hidden. When there is limited space, such as in native apps, use the top label.
Best practices
Required vs optional
Use required and optional indicators depending on their frequency. e.g. If more fields are optional, only indicate required fields, and vice versa. If all fields are one or the other, no indicator is needed.
Styling for indicators
- Required: Cherry red300 asterisk (*) with one space after the label content
- Optional: the word “optional” inside parenthesis, body small type style, mono500 (cloud) #868D96
Leading vs trailing icons
- Leading icons: further emphasize the input subject. These are typically mono500 (cloud) #868D96. Especially helpful when labels are hidden.
- Trailing icons: allow a user to interact with the content of the input; actions like “clear” and “show / hide” are common. These are typically purple500 (grape) #7134BE.
Character count experience
Base the character count upper-limit on two data points: 1) the average length of user-entered content, and 2) the destination of that content. When character count is reached, the error is triggered.
Overflow tooltip
When the field allows more content than is visible, a tooltip appears on hover in desktop. The user can also view this content by selecting the field and highlighting to the end of the content.
Resources
(internal only)