# Textarea.

## Overview

### What does the component do?

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

### When should the component be used?

- When longer entries are required from the user.

### 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.

## Variants

### States

The component has the following states:

- Default
- Active
- Error
- Disabled

### Variants

The component has the following variants:

- listed / boxed
- with icon / without icon
- with label / without label

#### Listed, with label, without icons

##### Default

![Image of a textarea, with label, without icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-listed-default-light.webp "Textarea, with label, without icons, default")

![Image of a textarea, with label, without icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-listed-default-dark.webp "Textarea, with label, without icons, default")

##### Placeholder

![Image of a textarea, with label, without icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-placeholder-light.webp "Textarea, with label, without icons, placeholder")

![Image of a textarea, with label, without icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-placeholder-dark.webp "Textarea, with label, without icons, placeholder")

#### Listed, with label, with icons

##### Default

![Image of a textarea, with label, with icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-default-light.webp "Textarea, with label, with icons, default")

![Image of a textarea, with label, with icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-default-dark.webp "Textarea, with label, with icons, default")

##### Placeholder

![Image of a textarea, with label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-placeholder-light.webp "Textarea, with label, with icons, placeholder")

![Image of a textarea, with label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-placeholder-dark.webp "Textarea, with label, with icons, placeholder")

#### Listed, without label, with icons

##### Default

![Image of a textarea, without label, with icons, default ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-without-label-light.webp "Textarea, without label, with icons, default")

![Image of a textarea, without label, with icons, default ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-without-label-dark.webp "Textarea, without label, with icons, default")

##### Placeholder

![Image of a textarea, without label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-without-label-placeholder-light.webp "Textarea, without label, with icons, placeholder")

![Image of a textarea, without label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-listed-icons-without-label-placeholder-dark.webp "Textarea, without label, with icons, placeholder")

#### Boxed, with label, without icons

##### Default

![Image of a boxed textarea, with label, without icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-default-light.webp "Boxed textarea, with label, without icons, default")

![Image of a boxed textarea, with label, without icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-default-dark.webp "Boxed textarea, with label, without icons, default")

##### Placeholder

![Image of a boxed textarea, with label, without icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-placeholder-light.webp "Boxed textarea, with label, without icons, placeholder")

![Image of a boxed textarea, with label, without icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-placeholder-dark.webp "Boxed textarea, with label, without icons, placeholder")

#### Boxed, with label, with icons

##### Default

![Image of a boxed textarea, with label, with icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-default-light.webp "Boxed textarea, with label, with icons, default")

![Image of a boxed textarea, with label, with icons, default](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-default-dark.webp "Boxed textarea, with label, with icons, default")

##### Placeholder

![Image of a boxed textarea, with label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-placeholder-light.webp "Boxed textarea, with label, with icons, placeholder")

![Image of a boxed textarea, with label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-placeholder-dark.webp "Boxed textarea, with label, with icons, placeholder")

#### Boxed, without label, with icons

##### Default

![Image of a boxed textarea, without label, with icons, default ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-without-label-light.webp "Boxed textarea, without label, with icons, default")

![Image of a boxed textarea, without label, with icons, default ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-without-label-dark.webp "Boxed textarea, without label, with icons, default")

##### Placeholder

![Image of a boxed textarea, without label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-without-label-placeholder-light.webp "Boxed textarea, without label, with icons, placeholder")

![Image of a boxed textarea, without label, with icons, placeholder ](https://digital.sbb.ch/assets/images/mobile/textarea-boxed-icons-without-label-placeholder-dark.webp "Boxed textarea, without label, with icons, placeholder")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=309-2236&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/textarea/