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
Chip.
Übersicht
Was macht die Komponente?
Stellt Werte und Kategorien als kompakte dar.
Wann soll die Komponente eingesetzt werden?
Wenn es in einem Formular möglich sein soll, zu einem Attribut mehrere Werte zu setzen.
Wenn nach Kategorien gefiltert werden soll.
Regeln
Der Begriff im Chip ist immer einzeilig (keine Zeilenumbrüche) und der Chip selber wächst in der Breite mit dem Text mit.
Wird ein Chip aufgrund des Textes zu lang für den Viewport, wird der Text mit «...» gekürzt.
Die Chips werden in einem Textfield dargestellt. Dieses kann je nach Anzahl Chips und vorhandenem Platz auch mehrzeilig werden.
Mittels Backspace können Chips im Textfield gelöscht werden.
Je nach Anwendungsfall können die Chips über "autocomplete"-Auswahlen oder mit Freitext generiert werden.
Varianten
Zustände
Die Komponente hat folgende Zustände:
Active
Disabled
Hover
Focused
Varianten
Input
Spezifikationen
Link target opens in a new window.DesignLink target opens in a new window.Code