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
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
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:
- the average length of user-entered content
- the destination of that content. When character count is reached, the error is triggered.
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.
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.
Resources
(internal only)
Related components
Text field - A form field that allows one line of free-form text.