1. What does the element do?

• It is used for entering larger amounts of text in forms.

2. When should the element be used?

• When longer entries are 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 abbreviated to ‘(opt.)’ for shorter fields.
• An infoicon can be displayed in the entry field for detailed explanations. A tooltip opens if this infoicon is clicked on.
• 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 text already entered shifts upwards. The text area maintains its original size.

4. Variants and statuses

The element has the following statuses:

• Default
• Error
• Disabled

The element has the following variants:

• listed / boxed
• with icon / without icon
• with label / without label

4.1 Listed, with label, without icons

4.1.1 Default

4.1.2 Placeholder

4.2 Listed, with label, with icons

4.2.1 Default

4.2.2 Placeholder

4.3 Listed, without label, with icons

4.3.1 Default

4.3.2 Placeholder

4.4 Boxed, with label, without icons

4.4.1 Default

4.4.2 Placeholder

4.5 Boxed, with label, with icons

4.5.1 Default

4.5.2 Placeholder

4.6 Boxed, without label, with icons

4.6.1 Default

4.6.2 Placeholder

Design Specification

Figma-Link