Text Area

A form field that allows multiple lines of free-form text.

Content

Label

  • Clear, concrete, concise language
  • Strong entity names as much as possible. E.g.: say “Shift notes” and not “Add a shift note”
  • However, when the text area appears prompted by a previous choice, the label may include a verb or question. E.g.: “Tell us more,” “Add a reason.”

 

Label: none

  • Avoid this option as much as possible
  • If the text area is a required field, then having a label is mandatory
Do
TextArea-DoDont-Label-Do
Don’t
TextArea-DoDont-Label-Dont

 

Placeholder vs. hint text

Placeholder text offers examples, where as hint text offers more context/instruction.

Placeholder

  • Use to give examples or specific formatting on how to fill out the text field, especially around formatting or the information that needs to go in there.
  • Will often remain empty
  • Use “e.g.” to introduce examples.

Hint

  • Use to give context or instruction about the info that will go in the text area, like when people will see this
  • Will often remain empty
TextArea-Example-Hint

 

Best practices

Resizing / scrolling

  • Web: by default, don’t offer resizing. Use autoresize ONLY at the maximum size and ONLY when needed, ex: longer blocks of content and when user-added content varies in length
  • Native app: don’t offer resize. Instead, add a scroll.
  • Modals: don’t offer resize. Instead, add a scroll.

 

Character count experience

Base the character count upper-limit on two data points:

  1. the average length of user-entered content
  2. the destination of that content. When character count is reached, the error is triggered.
TextArea-Example-CharacterCount-1
TextArea-Example-CharacterCount-3
TextArea-Example-CharacterCount-2

 

Required vs. optional

Use required and optional indicators depending on their frequency. e.g. If more fields are optional, only mark required fields, and vice versa.

TextArea-Example-RequiredvOptional-1
TextArea-Example-RequiredvOptional-2

 

Adding email address

Use the chip component to add multiple email addresses. A user types an address, then presses either comma, space or tab to create a chip. To delete chips, the user simply hits the delete button or clicks the clear “x.”

Use the placeholder to indicate how users fill out this field in terms of formatting by highlighting the comma needed between each email to create a chip.

TextArea-Example-Email-1
TextArea-Example-Email-3
TextArea-Example-Email-2

 

Resources

(internal only)

Figma

Enhancements

 

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