Navigieren auf



1. What does the component do?

It is used for the entry of large amounts of text in forms.

2. When should the component be used?

When the entry of longer text is required from the user.

3. Rules

  • The text area always has a label.
  • Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be shortened to ‘(opt.)’ for short fields.
  • A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on.
  • The number of characters still available is shown bottom right (outside the text area is disabled).
  • The width of the text area is always the same as the entire width of the form.
  • The basic height can be set when designing the form.
  • If the text is longer than the basic height of the text area, the element increases in height with the content.

4. Variants and statuses

The component has the following statuses:

  • Default
  • Focused
  • Disabled
  • Error

4.1 Standard

Image of the text area component in the standard variant

Design specification

Code specification