FigmaOpenCode

Select

Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox, Ausklappliste, Klappliste

Ähnliche Komponenten: Radiobuttons, Checkbox

Kurzbeschreibung

Ein Select bietet die Möglichkeit zur Auswahl einer Option aus einer ausklappbaren Liste von Optionen.

Beispiele

• EFA Theme
• KERN Theme

Loading...

<KernSelect 
_label="Required" 
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" 
_value="[1]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_required></KernSelect>

<KernSelect 
_label="Label" 
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" 
_value="[1]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"></KernSelect>

<KernSelect 
_label="Label" 
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" 
_value="[1]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_disabled></KernSelect>

<KernSelect 
_label="Mit Hint" 
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" 
_value="[1]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_hint="Hint Text"></KernSelect>

<KernSelect 
_label="Mit Hint" 
_required
_error="Fehler Text"
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" 
_value="[1]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_hint="Hint Text"></KernSelect>

Beschreibung

Select erlaubt die Auswahl genau einer Option aus einer Liste von vordefinierten Optionen. Ein Select wird mit einem Label beschrieben und ein optionaler Hint kann noch mehr Information liefern. Ein Platzhaltertext fordert Nutzende auf, eine Auswahl zu treffen. Der ausgewählte Wert wird in der geöffneten Liste visuell hervorgehoben und im geschlossenen Zustand im Feld angezeigt. Im Select Feld kann nicht geschrieben werden.

Verwendungsregeln

Verwende ein Select zur Auswahl in Formularen, nicht jedoch als Zugang zu Aktionen oder als Navigationselement. Ein Select wird verwendet, wenn es zwischen 5 und 15 Optionen zur Auswahl gibt. Nutzende können nur eine Option aus der Liste auswählen, nicht mehrere. Die Benutzbarkeit eines Selects ist grundsätzlich schwierig, vor allem wenn es viele Optionen gibt. Versuche daher, auf Selects zu verzichten, indem du Informationen systematisch bei Nutzenden abfragst. Verwende dazu Radiobuttons und Checkboxen (gov.uk, W3C). Nutze ein Select nur dann, wenn du wenig Platz hast oder Eingabefehler vermeiden möchtest. .

Dos & Don’ts

Halte die Beschriftung der Werte in der Auswahlliste möglichst kurz.

Weitere Hinweise

• Verwende maximal 15 Werte in der Auswahlliste, da es sonst schwer für Nutzende ist, die richtige Option zu finden. Bevorzuge Radiobuttons, wenn möglich.
• Wähle nur dann einen Wert vorab aus, wenn es sich um eine bereits aktive Einstellung handelt. Anderenfalls können Nutzende durch die Vorauswahl beeinflusst werden oder die Notwendigkeit einer Auswahl wird übersehen.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

Siehe auch: BFIT Handreichungen

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Definiert, welche Tastenkombination verwendet werden kann, um das interaktive Element der Komponenten auszulösen oder zu fokussieren.	string | undefined	undefined
_alert	_alert	Definiert, ob die Bildschirmleser die Benachrichtigung vorlesen sollen.	boolean | undefined	true
_autoComplete	_auto-complete	Legt fest, ob das Eingabefeld automatisch vervollständigt werden kann.	"off" | "on" | undefined	undefined
_disabled	_disabled	Macht das Element nicht fokussierbar und ignoriert alle Ereignisse.	boolean | undefined	false
_error	_error	Definiert den Text der Fehlermeldung.	string | undefined	undefined
_hideError	_hide-error	Versteckt die Fehlermeldung, lässt sie aber im DOM für das aria-describedby der Eingabe.	boolean | undefined	false
_hideLabel	_hide-label	Versteckt die Beschriftung standardmäßig und zeigt den Beschriftungstext mit einem Tooltip an, wenn das interaktive Element fokussiert ist oder die Maus darüber ist.	boolean | undefined	false
_hint	_hint	Definiert den Hinweistext.	string | undefined	''
_icons	_icons	Definiert die Klassennamen des Symbols (z.B. _icons="material-symbols filled rounded search").	string | undefined	undefined
_id	_id	Definiert die interne ID des primären Komponentenelements.	string | undefined	undefined
_label (required)	_label	Definiert das sichtbare oder semantische Label der Komponente (z.B. aria-label, label, Überschrift, Beschriftung, Zusammenfassung, etc.). Setzen Sie auf false, um den Experten-Slot zu aktivieren.	string	undefined
_multiple	_multiple	Lässt das Eingabefeld mehrere Eingaben akzeptieren.	boolean | undefined	false
_name	_name	Definiert den technischen Namen eines Eingabefelds.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefined	undefined
_options	_options	Optionen, aus denen der Benutzer auswählen kann, unterstützt auch Optgroup.	(Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string | undefined	undefined
_readOnly	_read-only	Macht das Eingabeelement schreibgeschützt.	boolean | undefined	false
_required	_required	Macht das Eingabeelement erforderlich.	boolean | undefined	false
_rows	_rows	Definiert, wie viele Reihen von Optionen gleichzeitig sichtbar sein sollen.	number | undefined	undefined
_syncValueBySelector	_sync-value-by-selector	Selektor zur Synchronisierung des Wertes mit einem anderen Eingabeelement.	string | undefined	undefined
_tabIndex	_tab-index	Definiert, welchen Tab-Index das primäre Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	number | undefined	undefined
_tooltipAlign	_tooltip-align	Definiert, wo der Tooltip vorzugsweise angezeigt werden soll: oben, rechts, unten oder links.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Zeigt an, ob die Eingabe von einem Benutzer berührt wurde.	boolean | undefined	false
_value	_value	Definiert den Wert der Eingabe.	W3CInputValue[] | string | undefined	undefined