Select

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

Ähnliche Komponenten: Radio, Checkbox

Kurzbeschreibung

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

Beispiele

EFA Theme
KERN Theme

chevron_right Live Editor

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

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

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

<KernSelect 
_label="Label" 
_options="[{'label':'Option 1','value':0},{'label':'Option 2','value':1},{'label':'Option 3','value':2}]" 
_value="[0]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_hint="Hinweis Text"></KernSelect>

<KernSelect 
_label="Label" 
_required
_error="Fehler Text"
_options="[{'label':'Option 1','value':0},{'label':'Option 2','value':1},{'label':'Option 3','value':2}]" 
_value="[0]"
_icons="{'right': { 'icon': 'material-symbols-outlined filled expand_more'}}"
_hint="Hinweis 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 Radios und Checkboxen (gov.uk, W3C). Nutze ein Select nur dann, wenn du wenig Platz hast oder Eingabefehler vermeiden möchtest. .

Dos und 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 Radios, 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.

Auswahllisten, die Optionsgruppen enthalten, sollten mit „optgroup“ ausgezeichnet werden oder mit der role „group“ mit einer Verknüpfung der Gruppenüberschrift über „aria-labelledby“ umgesetzt werden.

Siehe auch: BFIT Handreichungen, MagentaA11y, w3.org - Grouping Controls und w3.org - combobox

kern-select

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`

Select

Kurzbeschreibung​

Beispiele​

Beschreibung​

Verwendungsregeln​

Dos und Don’ts​

Weitere Hinweise​

Barrierefreiheit​