COMPONENTS

Textarea

Textarea is an input that accepts long-form text entries.

textarea-intro.png
textarea-anatomy.png
  1. Label
  2. Input container
  3. Character count
  4. Supporting text
  5. Drag handle

Textarea can be used with or without an outer label.

textarea-variations.png

Textarea can display a status which can be used for form validation. The four status types are success, loading, warning, and error.

textarea-status.png

Textarea has six possible states — enabled, focus, active, filled, disabled, and read-only.

textarea-states.png

Textarea can be displayed in large, medium and small sizes.

textarea-sizes.png
  • Within a single form the same type of Input and Textarea should be used, either all with top label or all with no label.
  • Textarea inputs may be configured to resize manually with a drag handle or configured to have a fixed height or width.