Text Field

A form field that allows one line of free-form text.

Overview

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.
Do
TextField-DoDont-Label-2-Do
Don’t
TextField-DoDont-Label-2-Dont

 

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.
TextField-DoDont-Placeholder-Do
TextField-DoDont-Placeholder2
Do
TextField-DoDont-Placeholder-Do
Don’t
TextField-DoDont-Placeholder2
TextField-Example-Placeholder

 

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.
Do
TextField-DoDont-InfoMessage-Do
Don’t
TextField-DoDont-InfoMessage-Dont

 

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.
Do
TextField-DoDont-Hint-Do
Don’t
TextField-DoDont-Hint-Dont

 

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.
Do
TextField-DoDont-SimpleError-Do
Don’t
TextField-DoDont-SimpleError-Dont

 

Do
TextField-DoDont-ComplexError-Do
Don’t
TextField-DoDont-ComplexError-Dont

 

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.

TextField-Example-Security

 

Success

The success state is super rare. Predominantly used in password flows.

TextField-Example-Success

 

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.
TextField-Example-Auto

 

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.

TextField-Example-ReadOnlyvDisabled

 

Placement

Horizontal

Space selects and text fields 16px apart.

TextField-Example-Placement-Horizontal

 

Vertical

Space selects and text fields 40px apart.

TextField-Example-Placement-Vertical

 

Labels

Labels can be placed on top, side or hidden. When there is limited space, such as in native apps, use the top label.

TextField-Example-Label1
TextField-Example-Label2
TextField-Example-Label3

 

Do
TextField-DoDont-Label-1-Do
Don’t
TextField-DoDont-Label-1-Dont

 

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
TextField-Example-ReqvOpt-Req
TextField-Example-ReqvOpt-Opt

 

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.
TextField-Example-Icon-Trailing
TextField-Example-Icon-Leading
TextField-Example-Icon-LeadingandTrailing

 

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.

TextField-Example-CharCount1
TextField-Example-CharCount2
TextField-Example-CharCount3

 

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.

TextField-Example-OverflowTooltip

 

Resources

(internal only)

Figma

Storybook

Enhancements