# Text-Input.

## Übersicht

### Was macht die Komponente?

- Dient zur Eingabe von Texten und Zahlen.

### Wann soll die Komponente eingesetzt werden?

- Wenn vom Benutzer eine Eingabe benötigt wird.

### Regeln

- Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label-Text versehen. Bei kurzen Feldern darf der Text «(optional)» mit «(opt.)» abgekürzt werden.
- Wird der Text während der Eingabe länger als die Breite des Eingabefeldes wird der geschriebene Text nach links verdrängt, damit das aktuell Geschriebene immer gesehen wird.
- Nach dem Verlassen des Eingabefeldes mit einem langen Text wird dieser am Ende abgeschnitten und mit «...» gekennzeichnet.
- Kann der Benutzer ein Formularfeld nie bearbeiten, so darf kein Eingabefeld verwendet werden (Darstellung als Text).
- Je nach Typ des Eingabefelds muss der richtige Typ der Tastatur gewählt werden (Default, E-Mail, URL, Phone)

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Default
- Active
- Error
- Disabled

### Varianten

Die Komponente hat folgende Varianten:

- listed / boxed
- mit Icon / ohne Icon
- mit Label / ohne Label

#### Listed, mit Label, ohne Icons

##### Default

![Darstellung des Text-input Feldes in einer Liste mit Label ohne Icons](https://digital.sbb.ch/assets/images/mobile/text-input-listed-default-light.webp "Textarea Feld in einer Liste mit Label ohne Icons")

![Darstellung des Text-input Feldes in einer Liste mit Label ohne Icons](https://digital.sbb.ch/assets/images/mobile/text-input-listed-default-dark.webp "Textarea Feld in einer Liste mit Label ohne Icons")

##### Placeholder

![Darstellung des Text-input Feldes in einer Liste mit Label ohne Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-placeholder-light.webp "Textarea Feld in einer Liste mit Label ohne Icons, Placeholder")

![Darstellung des Text-input Feldes in einer Liste mit Label ohne Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-placeholder-dark.webp "Textarea Feld in einer Liste mit Label ohne Icons, Placeholder")

#### Listed, mit Label, mit Icons

##### Default

![Darstellung des Text-input Feldes in einer Liste mit Label und Icons](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-default-light.webp "Textarea Feld in einer Liste mit Label und Icons")

![Darstellung des Text-input Feldes in einer Liste mit Label und Icons](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-default-dark.webp "Textarea Feld in einer Liste mit Label und Icons")

##### Placeholder

![Darstellung des Text-input Feldes in einer Liste mit Label und Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-placeholder-light.webp "Textarea Feld in einer Liste mit Label und Icons, Placeholder")

![Darstellung des Text-input Feldes in einer Liste mit Label und Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-placeholder-dark.webp "Textarea Feld in einer Liste mit Label und Icons, Placeholder")

#### Listed, ohne Label, mit Icons

##### Default

![Darstellung des Text-input Feldes in einer Liste mit Icons ohne Label](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-without-label-light.webp "Textarea Feld in einer Liste mit Icons ohne Label")

![Darstellung des Text-input Feldes in einer Liste mit Icons ohne Label](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-without-label-dark.webp "Textarea Feld in einer Liste mit Icons ohne Label")

##### Placeholder

![Darstellung des Text-input Feldes in einer Liste mit Icons ohne Label, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-without-label-placeholder-light.webp "Textarea Feld in einer Liste mit Icons ohne Label, Placeholder")

![Darstellung des Text-input Feldes in einer Liste mit Icons ohne Label, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-listed-icons-without-label-placeholder-dark.webp "Textarea Feld in einer Liste mit Icons ohne Label, Placeholder")

#### Boxed, mit Label, ohne Icons

##### Default

![Darstellung des Text-input Feldes in einer Box mit Label ohne Icons](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-default-light.webp "Textarea Feld in einer Box mit Label ohne Icons")

![Darstellung des Text-input Feldes in einer Box mit Label ohne Icons](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-default-dark.webp "Textarea Feld in einer Box mit Label ohne Icons")

##### Placeholder

![Darstellung des Text-input Feldes in einer Box mit Label ohne Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-placeholder-light.webp "Textarea Feld in einer Box mit Label ohne Icons, Placeholder")

![Darstellung des Text-input Feldes in einer Box mit Label ohne Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-placeholder-dark.webp "Textarea Feld in einer Box mit Label ohne Icons, Placeholder")

#### Boxed, mit Label, mit Icons

##### Default

![Darstellung des Text-input Feldes in einer Box mit Label und Icons](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-default-light.webp "Textarea Feld in einer Box mit Label und Icons")

![Darstellung des Text-input Feldes in einer Box mit Label und Icons](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-default-dark.webp "Textarea Feld in einer Box mit Label und Icons")

##### Placeholder

![Darstellung des Text-input Feldes in einer Box mit Label und Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-placeholder-light.webp "Textarea Feld in einer Box mit Label und Icons, Placeholder")

![Darstellung des Text-input Feldes in einer Box mit Label und Icons, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-placeholder-dark.webp "Textarea Feld in einer Box mit Label und Icons, Placeholder")

#### Boxed, ohne Label, mit Icons

##### Default

![Darstellung des Text-input Feldes in einer Box mit Icons ohne Label](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-without-label-light.webp "Textarea Feld in einer Box mit Icons ohne Label")

![Darstellung des Text-input Feldes in einer Box mit Icons ohne Label](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-without-label-dark.webp "Textarea Feld in einer Box mit Icons ohne Label")

##### Placeholder

![Darstellung des Text-input Feldes in einer Box mit Icons ohne Label, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-without-label-placeholder-light.webp "Textarea Feld in einer Box mit Icons ohne Label, Placeholder")

![Darstellung des Text-input Feldes in einer Box mit Icons ohne Label, Placeholder](https://digital.sbb.ch/assets/images/mobile/text-input-boxed-icons-without-label-placeholder-dark.webp "Textarea Feld in einer Box mit Icons ohne Label, Placeholder")

### Spezifikationen

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

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/text-input/