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. Placeholder + typed text 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
  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