Select Eingabe

Die select Komponente stellt ein Dropdown-Menü zur Auswahl eines einzelnen Werts bereit. Sie rendert ein natives HTML-Select-Element mit einheitlichem Styling.

Funktionen

  • Optionen: Liste oder Dictionary mit auswählbaren Werten.

  • Voreingestellte Option: Den initial ausgewählten Wert festlegen.

  • Tooltip: Optionaler Erklärungstext beim Darüberfahren mit der Maus.

  • States: Disabled and required states.

HTML

Verwendung

Die Komponente wird über das select Tag eingebunden.

{% load insight_tags %} {% select config=select_config %} <!-- or --> {% select name="test" label="Test" options=["A", "B", "C"] %}

Parameter

Laden…

config (SelectConfig 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
explanation str

Eine kurze Beschreibung des Filters, welche in einem Tooltip angezeigt wird.

 "" False
options list[str] | dict[str, str]

Liste von Werten, welche ausgewählt werden können.

 [] False
selected_option str

Wert (Der Key-Wert, falls die Optionen als Dict übergeben wurden) der aktuell ausgewählten Option.

 "" False
SelectConfig( name="country", label="Country", options={"de": "Germany", "fr": "France", "uk": "United Kingdom"}, selected_option="de", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das <label> und der dazugehörige <select> sind mit for / id miteinander verknüpft.

  • Die Komponente verwendet das native Element <select>, welches über integrierte Tastaturunterstützung und Kompatibilität mit Screenreadern verfügt.

  • Pflichtfelder werden mit einem Sternchen und dem Attribut aria-label='Required' für Screenreader gekennzeichnet.

  • Deaktivierte Optionen verwenden das Attribut disabled, welches an assistive Technologien korrekt übermittelt wird.

  • Erläuternde Tooltips liefern über data-insight-tooltip zusätzliche Informationen.

  • Required fields add aria-required='true'; help_text and error are rendered as paragraphs linked via aria-describedby, and an error also sets aria-invalid='true' and aria-errormessage; the message itself is plain text, not a live region.

Offene Punkte

  • Dem <select> Element fehlen die Attribute required und disabled.

Verwandte Themen