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

  • A filter chip always has an indicator that shows how many results lie behind it.
  • 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.

4. Variants and statuses

The component has the following statuses:

  • Active

4.1 Input

This variant has the following statuses:

  • Disabled
  • Hover
  • On-Click/Dragged
Image of the chip component as an entry value
  • The chips can be generated via ‘autocomplete’ selection or with free text depending on the case.

Design specification

4.2 Filter

This variant has the following statuses:

  • Inactive
Image of the chip component for filtering
  • • By clicking on a tag, the respective status toggles to the others and influences the filter result.

Design specification