Text area

Definition: A text area is a multi-line input for longer text.

When to use

Use a text area when you want users to input longer, multi-line text, such as comments, descriptions, or messages.

 

Anatomy

  1. Label
  2. Input
  3. Call out
  4. Field
  5. Icon (Expand)
  6. Word limit

 

 

 

 

 

Variations

  1. Top label (Recommended for forms as it can help improve accessibility.)
  2. Left label (For legacy products)
  3. Text area with word limits

 

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Read only (white)
  5. Read only (grey)
  6. Error
  7. Error focused
  8. Disabled