Text Area Field

A text area includes a label and a longer area you can type multiple lines of text into.

Also known as:
Text areaTextareaMultiline text fieldTextarea Autosize

AnchorNeed to know

  • For sizing, consider likely text input and use existing data where possible.

Visuals

UI Kit

To keep in mind

  • Prominent Text Area variant

    • Text Area Field variant that optimizes for contexts where the aim is user feedback collection rather than system settings information (such as performance feedback).
    • Prominent Text Areas and Text Area Fields are generally not mixed in the same context.
  • Optional vs required:

    • As a rule of thumb, generally use “ (optional)” to indicate optional fields instead of “*” to indicate required fields. See Forms for details.
  • Don't use placeholder text as it's temporary and vanishes once a user enters text, losing any valuable context. Placeholder text is also notoriously difficult to provide accessibly.

  • For sizing, consider likely text input and use existing data where possible:

    • By default, start with 4 rows and auto-resize as the user enters more text.
    • Where spaced is limited such as inside a modal, do not auto-resize and limit manual resizing.
    • On page load, if the text area already contains lots of text, consider auto-resizing to reveal the full text.
  • For right-to-left (RTL) languages, the layout of a text area is swapped. The validation icons are left-aligned.

  • Consider if spell-check or autocorrect needs to be enabled or disabled. Usually in a text area field, enabled is suitable. Conversely, autocorrect on an email address in a Text Field could introduce errors.

Validation

Sometimes we validate text areas on “blur” (when leaving the text area) or on form submission as needed. We don’t validate on key strokes. See Forms validation and feedback to learn more.

When displaying a validation messages, such as an error, use a aria-describedby attribute to associate the text area field with the element containing the validation message.

Interaction

See Interaction states guidelines for disabled elements.

Copy guidelines

To be scannable and fully helpful, a text area must have an associated label. Here’s what you should know:

Give it a clear, short label

Make sure your text area has a short, descriptive label above it that describes what the user should type into the box below. To facilitate keyword loading and scanning, avoid phrasing your labels as questions that are unnecessarily wordy. If you find that the application lends itself to question like labels consider consider using the Prominent Text Area variant.

Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text.

Do:
  • Do
    Comment
Don't:
  • Don't
    Enter your comment here

Error text should be succinct

Keep all error text short, useful and to the point.

Do:
  • Do
    You must enter a comment
Don't:
  • Don't
    You entered a comment that is invalid

Don’t use trailing full stops or periods unless the error message contains more than 1 sentence.

Helper text should provide extra guidance

Helper text placed below the field can include further instructions or information on how to fill out the text area. It can also include details on what will happen with the filled out information.

Do:
  • Do
    Your comment will be used anonymously
Don't:
  • Don't
    For example, “Thanks for everything!”

Keep in mind that helper text and examples aren’t always required. For example, a text area asking for someone’s opinion doesn’t need an example in it if it will be misleading.

Write in sentence case with minimal punctuation

All text area copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

When to use and when not to use

When to use
  • Use a Text Area Field to gather longer text input.
  • If the aim is to collect general user feedback rather than system settings information consider using the Prominent Text Area variant.
When not to use
  • If the user needs to format some of the text, such as applying bold or adding links, use a rich text editor instead.
  • Avoid gathering input from users that isn't absolutely necessary.
  • For shorter text input, use a Text Field instead.

External links

Here are some examples from elsewhere: