Textarea Guidelines

Use Textarea to allow users to enter a larger amount of text that would not fit into a single line. The text can be letters, numbers, or punctuation.

Best Practices

Textareas should:

• Be clearly labeled to define what information a user can enter. Use only a few words.
  • The label should be aligned to the left or above the textarea, in harmony with the surrounding layout.
• Have placeholder text — when not edited — to provide a hint or example about what should be entered.
  • The placeholder text should be set in lighter colour and italics to be visually distinguishable from typed content.
• Have a helper message under the textarea if the placeholder text is insufficient for further instructions.
• Show the cursor when clicking into it.
• Allow the user to write, edit, copy, paste, or select text.
• Provide options to format the text, if it makes sense.
  • E.g. bold, italic, insert links, etc.
  • Limit the text formatting options to match the options available in the output.
  • Use a WYSIWYG editor when providing formatting options, or provide a preview of the output.
• Allow the user to set the height of the textarea, or grow in height dynamically as the text exceeds the original height.
• Provide feedback on the amount of text already entered, especially if it is limited.
  • Show a character counter above the top right corner, e.g. "150 characters left".
  • Consider highlighting text that exceeds the character limit.
• Have a red asterisk after its label if it is a mandatory field.

Try to avoid:

• Using it for a few words of text that would fit into a single line. Use Text Input instead.
• Providing formatting options that are not available in the output.