Die MarkeLink target opens in a new window. SBB Markenportal Logo Digitale Uhr NutzungsrechteFarben Basis-Farben Zusätzliche Farben Off-Brand FarbenAssets Icons Fahrplan-Icons PiktogrammeSprache Über UX Writing Button- und Linktexte Benachrichtigungen Formulare und Eingaben Fortschrittsanzeige Digitale Wörterliste
Einführung Über Barrierefreiheit Über diesen Guide Kontakt Weitere InformationenRollen Product Owner User Research Interaction Design Visual Design Development Content Design Testing
Erste Schritte Was ist ein Design System? Designing Coding FAQ HilfeOrganisation Prozess Contribution KontaktMobile Übersicht Basis KomponentenLyne Übersicht Was ist Lyne? Releases Presets & Themes Design Tokens Komponenten TemplatesMaps Übersicht Basis InformationenPatterns Übersicht
Guides Power-Apps Digitale Werbebanner SAP AI Design: GrundlagenVorschriften App Icons
Autocompletion.
Übersicht
Was macht die Komponente?
Unterstützt die Benutzer*innen bei der Eingabe mit Vorschlägen.
Wann soll die Komponente eingesetzt werden?
Wenn ein Eingabefeld viele vordefinierte Werte aufweisen kann.
Als Hilfe zur Vorschau bei Suchresultaten/-feldern.
Regeln
Die Autocompletion hat immer ein Label.
Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden.
Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
Während der Eingabe werden direkt Vorschläge eingeblendet (typischerweise nach drei Zeichen, kann aber projektspezifisch angepasst werden).
Die aufgelisteten Einträge können mittels Pfeiltasten durchlaufen und mit Enter übernommen werden.
Es werden maximal 10 Vorschläge angezeigt.
Bei der Auswahl eines Elementes schliesst sich die Autocompletion-Auswahl.
Varianten
Zustände
Die Komponente hat folgende Zustände:
Default
Hover
Active
Varianten
Standard
Mit Trefferanzeige
Optional zur Standard-Variante kann diese Variante eingesetzt werden, wenn eine Autocompletion-Liste immer mehr als die maximal angezeigten 10 Treffer beinhaltet.
Mit statischen Einträgen
Spezifikationen
Link target opens in a new window.DesignLink target opens in a new window.Code