Purpose

Textarea fields are form elements used to collect multi-line, free-form text input data from the user. They are used in place of the Text Input when the value entered is expected to exceed one line.

Anatomy

The Textarea can be broken down into the following elements -

  1. Mandatory (optional)
    The asterisk indicates whether filling in this field is optional or mandatory.

  2. Label
    The text label is used to describe the required input from the user.

  3. Text Input (optional)
    The text field within the container shows the user’s input once it has been filled in.

  4. In-line Messaging (optional)
    An optional text field that can be used for further information, clarifying the required input.

  5. Validation Message
    An error message to show if the Textarea has failed validation.

Variants & States

There are several states available to visualise the user’s progress.

DefaultFocusDisabled / Read-onlyError