Diggi Docs

Dropdown

Ein Dropdown ist ein Auswahlfeld, welches mehrere vordefinierte Optionen bietet. Aus diesen Optionen kann der Nutzer eine Auswahl treffen. Durch Anwählen des Dropdowns wird eine Liste der verfügbaren Optionen angezeigt. Die Verwendung eines Dropdowns empfiehlt sich, wenn eine direkte Auflistung der verfügbaren Optionen viel Platz in Anspruch nehmen würde. In Fällen mit weniger Optionen kann die Verwendung von Radiobuttons eine Alternative sein. Dropdowns werden nicht verwendet, wenn mehrere Auswahloptionen möglich sind.

Info! Auf Internetseiten wird das native Flyout verwendet. Daher wird im Frontend Kit das gestaltete Bosch-Flyout oder der Zustand „06 – open“ nicht angeboten.

Eigenschaften

Name	Type	Default Value	Description
id	string	undefined	Unique ID for the dropdown, unique id will be generated if not set.
label	string	undefined	Label of select field
required	boolean	false	Makes the dropdown required
tabIndex	number	undefined	Index of sequential keyboard navigation
disabled	boolean	undefined	Whether or not the dropdown is disabled
ariaLabel	string	undefined	Accessibility label. Used if label doesn't exist.
isDynamicWidth	boolean	false	Indicates that the width of the dropdown should by dynamic based on the longest option
options	IHyperSelectItem[]	undefined	Dropdown options which can be selected by user.
value	IHyperSelectItem	undefined	Item of options which is selected.
isLoading	boolean	false	Show Skeleton if true
hasEmptyOption	boolean	false	Offer an option that returns null when selected
title	string	undefined	Appears on hover
isStandard	boolean	true	Set false to show an downward arrow
style	string	undefined	Additional css styles

Beispiele

Dropdown (Standard)

Dropdown with Arrow down icon

Alternativ mit Arrow down Icon, wenn es sich nur nach unten öffnet. Kann ohne oder mit Textlabel verwendet werden.

Dropdown mit Label

Dropdown

Do's and Don'ts

Do

Verwendung eines Dropdowns mit fixierter Breite für ein harmonisches Layout