Multiselect Eingabe

Die multiselect Komponente stellt ein Auswahlfeld bereit, in dem mehrere Werte ausgewählt werden können. Sie verfügt über eine integrierte Suchleiste zum Filtern der Optionen.

WCAG AA

WCAG AAA

JavaScript

Funktionen

Mehrfachauswahl: Mehrere Werte können aus der Liste ausgewählt werden.
Suchfilter: Integrierte Suchfunktion zum schnellen Auffinden von Optionen.
Maximale Auswahl: Optionale Begrenzung der Anzahl an ausgewählten Optionen.
Schnellaktionen: Optionale Schaltflächen „Alle auswählen“ und „Alle abwählen“.

HTML

RTL

Verwendung

Die Komponente wird über das multiselect Tag eingebunden.

{% load insight_tags %} {% multiselect config=multiselect_config %}  {% multiselect name="test" label="Test" maximum=0 show_buttons=True options=["A", "B", "C"] %}

Parameter

config (MultiselectConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
maximum	int	Anzahl der maximal ausgewählten Optionen.	None	False
show_buttons	bool	Zusätzliche Buttons für 'Alle Auswählen' und 'Alle Abwählen' Buttons anzeigen.	False	False
options	list[str] \| dict[str, str]	Liste von Werten, welche ausgewählt werden können.	[]	False
selected_options	list[str]	Liste der aktuell ausgewählten Optionen.	[]	False

MultiselectConfig( name="tags", label="Select Tags (max 5):", maximum=5, show_buttons=True, options=["Python", "Django", "JavaScript", "React", "Docker"], selected_options=["Python", "Django"], )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status

WCAG AA (Grundlagen)

Das Label ist über aria-labelledby mit der Combobox verknüpft.
Vollständiges ARIA-Muster für eine Combobox: role='combobox', aria-haspopup='listbox', aria-expanded, aria-owns, aria-activedescendant.
Optionen verwenden role='option' zusammen mit aria-selected und eindeutigen IDs.
Ein Live-Bereich (aria-live='polite') meldet Änderungen der Auswahl an Screenreader.
Das Suchfeld verfügt über eine barrierefreie Beschriftung für die Filteroptionen.
Mit der Escape- und der Tab-Taste lässt sich das Dropdown-Menü schließen.
Der Fokus bleibt nach einer Änderung der Auswahl im Sucheingabefeld erhalten.
aria-activedescendant wird aktualisiert, um die Option anzuzeigen, auf der derzeit der Fokus liegt.

WCAG AAA (Erweitert)

Vollständige Tastaturnavigation: Mit den Pfeiltasten nach oben/unten durch die Optionen navigieren, mit der Eingabetaste auswählen, mit der Rücktaste die letzte Auswahl löschen.