Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English 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.
Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Active
  • Disabled
  • Hover
  • Focused

Varianten

Input

Darstellung des Chip

Spezifikationen

DesignCode

Impressum Contact Protection des données Paramètres des cookies