Radio Block Eingabe

Die radio_block Komponente stellt Optionsfelder als kompakte Schaltflächengruppe dar. Im Gegensatz zu herkömmlichen Optionsfeldern kann die Komponente bei einer Änderung der Auswahl, einen Request auslösen.

WCAG AA
HTMX

Funktionen

  • Anzeige im Button-Stil: Kompakter Block aus miteinander verbundenen Buttons.

  • HTMX-Integration: Löst Requests bei Änderung der Auswahl aus.

  • Script-Callback**: Optionaler Methodenaufruf bei Änderung der Auswahl.

  • Icon-unterstützung: Buttons können anstelle von Text oder zusätzlich zu diesem Icons anzeigen.

HTML

Verwendung

Die Komponente wird über das radio_block Tag eingebunden.

{% load insight_tags %} {% radio_block config=example_radio current_value=value %} <!-- or --> {% radio_block config=view_radio_config current_value=current_view request_url="/switch_view/" hx_target_id=hx_target_id %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
name str

Das gemeinsame HTML-Attribut „name“ für alle Radio-Buttons in dieser Gruppe.

 None True
label str

Ein beschreibender Text, welcher über den Radio-Elementen angezeigt wird.

 "" False
items

Eine Liste der Radio-Elemente.

 [] False
integrated bool

True, wenn sich die Gruppe in einer <form> befindet. Bei False bekommt die Gruppe ihre eigene <form>.

 False False
as_row bool

True, wenn die Radio-Elemente nebeneinander angezeigt werden sollen.

 True False
request_url str

Die URL, an welche der Request beim Klick auf einen der Radio-Button gesendet werden soll.

 "" False
hx_target_id str

Die ID des HTML-Tags, welcher beim Wechseln des Radio-Buttons ausgetauscht werden soll.

 "" False
hx_swap_method HtmxSwapMethod
HtmxSwapMethod

HTMX swap methods for content replacement.

innerHTML outerHTML beforebegin afterbegin beforeend afterend delete none
Typen Dokumentation →

Die Art und Weise, wie das Ziel ersetzt werden soll.

 outerHTML False
method str

Name der JavaScript Methode, welche beim Anklicken auf einen der Radio-Button ausgeführt werden soll.

 "" False
current_value str

Der Wert des aktuell ausgewählten Radio-Buttons.

 "" False
RadioBlockConfig( name="view", items=[ RadioItemConfig(tag_id="card", value="card", icon=IconConfig(name="squares-2x2")), RadioItemConfig(tag_id="table", value="table", icon=IconConfig(name="list-bullet")), ], current_value="card", hx_target_id="content-area", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Gruppe verwendet <fieldset> zusammen mit <legend>, um eine korrekte Gruppierungssemantik zu gewährleisten.

  • Radio-Inputs verwenden sr-only, um die native Steuerung auszublenden, sie aber weiterhin zugänglich zu halten.

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

  • Labels können im reinen Screenreader-Modus aria-label verwenden.

  • Die Komponente unterstützt die Navigation über die Tastatur mittels der Pfeiltasten (hoch/runter, rechts/links).

  • Sichtbare Fokusanzeigen werden über peer-focus:outline bereitgestellt.

Verwandte Themen