Navigieren auf digital.sbb.ch

Beta

Chip

1. What does the component do?

  • It shows values and categories as compact elements.

2. 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.

3. 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 text field. 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.

4. Variants and statuses

The component has the following statuses:

  • Active
  • Disabled
  • Hover
  • Focused

4.1 Input

Image of the chip component as an entry value

Design specification

Code specification