Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Zusätzliche Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen App Icons Textfield Übersicht

Was macht die Komponente?

  • Dient zur Eingabe von Texten und Zahlen.

Wann soll die Komponente eingesetzt werden?

  • Wenn von den Benutzer*innen eine Eingabe benötigt wird.

Regeln

  • Ein Eingabefeld hat immer ein Label.
  • Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
  • Der Eingabetext ist immer einzeilig.
  • 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.
  • Ein Eingabefeld kann einen Hinweistext (Placeholder) enthalten, welcher direkt im Eingabefeld angezeigt wird, solange von den Benutzer*innen kein Wert eingetragen wurde.
  • Können die Benutzer*innen ein Formularfeld nie bearbeiten, so darf kein Eingabefeld verwendet werden (Darstellung als Text).
Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Placeholder
  • Focused
  • Disabled
  • Error
  • Mandatory
  • Readonly

Varianten

Standard

Darstellung eines Textfelds


Passworteingabe

Darstellung eines Textfelds zur Passworteingabe


  • Das Eingabefeld in der Variante «Passwort» stellt keinen Zustand «Placeholder» zur Verfügung.

Löschbar

Darstellung eines Textfelds mit der Möglichkeit zu direktem Löschen des Werts


Spezifikationen

DesignCode