Zur Navigation
Zum Inhalt
Kontakt
Menu
Find component
Overview Lean
Principles
Foundation
Accessibility
Design System
Guidelines
Deutsch
Français
Italiano
English
Our design principles
User-centred
Recognisable
Inclusive
Reduced
Holistic
Self-explanatory
Task-oriented
Appropriate
SBB Brand portal
Logo
Digital clock
Rights of use
Base colors
Functional colors
Off brand colors
Icons
Timetable icons
Pictograms
About accessibility
Über diesen Guide
Contact
Further information
Product Owner
User Research
Interaction Design
Visual Design
Development
Content Design
Testing
What is a design system?
Designing
Coding
FAQ
Help
Process
Contribution
Contact
Overview
Base
Components
Overview
Releases
Design Tokens
Components
Roadmap
Overview
Base
Informationen
Overview
Base
Components
Sense & Purpose
Community Assets
Instructions
App Icons
Power-Apps
Digital banner ads
SAP Design Guidelines
Chip
Overview
What does the component do?
It shows values and categories as compact component.
When should the component be used?
When it should be possible to assign several values to an attribute in a form.
For filtering by categories.
Rules
The term in the chip is always single-line (no line breaks) and the chip itself increases in width with the text.
If a chip is too long for the viewport because of the text, the text is shortened with “…”.
The input chips are shown in a
textfield
. This can also be multi-line depending on the number of chips and available space.
The chips in the textfield can be deleted by using backspace.
The chips can be generated via ‘autocomplete’ selection or with free text depending on the use case.
States and variants
States
The component has the following states:
Active
Disabled
Hover
Focused
Variants
Input
Specifications
Design
Code
Find component
Lean
Enter keyword
Basics
Brand
Divider
Icon
Text
Typografie
Components
Accordion
Autocompletion
Breadcrumb
Button
Buttonbar
Checkbox
Chip
Contextmenu
Datepicker
Dialog
Fieldset
Fileselector
Filter
Header
Link
Loading Indicator
Menuitem
Notification
Pagination
Processflow
Radiobutton
Select (Dropdown)
Sidebar
Slider
Status
Tab
Table
Tag
Textarea
Textexpand
Textfield
Timefield
Toggle
Tooltip
Tree
Usermenu
Imprint
Contact
Data privacy
Cookie settings