Navigieren auf digital.sbb.ch

Beta

Textfield

1. Was macht das Element?

  • Dient zur Eingabe von Texten und Zahlen.

2. Wann soll das Element eingesetzt werden?

  • Wenn vom Benutzer eine Eingabe benötigt wird.

3. 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)

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

  • Default
  • Active
  • Error
  • Disabled

Das Element hat folgende Ausprägungen:

  • listed / boxed
  • mit Icon / ohne Icon
  • mit Label / ohne Label

4.1 Listed, mit Label, ohne Icons

4.1.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.1.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.2 Listed, mit Label, mit Icons

4.2.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.2.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.3 Listed, ohne Label, mit Icons

4.3.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.3.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.4 Boxed, mit Label, ohne Icons

4.4.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.4.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.5 Boxed, mit Label, mit Icons

4.5.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.5.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.6 Boxed, ohne Label, mit Icons

4.6.1 Default

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

4.6.2 Placeholder

Darstellung des Text-input Feldes
Darstellung des Text-input Feldes

Design Spezifikation

Figma-Link