Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lean 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 Komponenten 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 Autocompletion Übersicht

Was macht die Komponente?

  • Unterstützt die Benutzer*innen bei der Eingabe mit Vorschlägen.

Wann soll die Komponente eingesetzt werden?

  • Wenn ein Eingabefeld viele vordefinierte Werte aufweisen kann.
  • Als Hilfe zur Vorschau bei Suchresultaten/-feldern.

Regeln

  • Die Autocompletion hat immer ein Label.
  • Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden.
  • Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
  • Während der Eingabe werden direkt Vorschläge eingeblendet (typischerweise nach drei Zeichen, kann aber projektspezifisch angepasst werden).
  • Die aufgelisteten Einträge können mittels Pfeiltasten durchlaufen und mit Enter übernommen werden.
  • Es werden maximal 10 Vorschläge angezeigt.
  • Bei der Auswahl eines Elementes schliesst sich die Autocompletion-Auswahl.
 Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover
  • Active

Varianten

Standard

Darstellung des Autocompletes

Mit Trefferanzeige

Optional zur Standard-Variante kann diese Variante eingesetzt werden, wenn eine Autocompletion-Liste immer mehr als die maximal angezeigten 10 Treffer beinhaltet.

Darstellung des Autocompletes mit Trefferanzeige

Mit statischen Einträgen

Darstellung des Autocompletes mit mit statischen Einträgen

Spezifikationen

DesignCode
Trouver un composant

Lean

Basics Brand Brand Divider Divider Icon Icon Text Text Typografie Typografie Components Accordion Accordion Autocompletion Autocompletion Breadcrumb Breadcrumb Button Button Buttonbar Buttonbar Checkbox Checkbox Chip Chip Contextmenu Contextmenu Datepicker Datepicker Dialog Dialog Fieldset Fieldset Fileselector Fileselector Filter Filter Header Header Link Link Loading Indicator Loading Indicator Menuitem Menuitem Notification Notification Pagination Pagination Processflow Processflow Radiobutton Radiobutton Select (Dropdown) Select (Dropdown) Sidebar Sidebar Slider Slider Status Status Tab Tab Table Table Tag Tag Textarea Textarea Textexpand Textexpand Textfield Textfield Timefield Timefield Toggle Toggle Tooltip Tooltip Tree Tree Usermenu Usermenu
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Paramètres des cookies