Navigieren auf digital.sbb.ch

Beta

Chip

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English

1. Was macht die Komponente?

  • Stellt Werte und Kategorien als kompakte Elemente dar.

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

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

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

  • Active
  • Disabled
  • Hover
  • Focused

4.1 Input

Darstellung der Komponente Chip als Eingabewert

Design Spezifikation

Code Spezifikation