Radio Group Eingabe

Die radio_group Komponente stellt eine Gruppe von Standard-Optionsfeldern dar. Die Komponente kann verwendet werden, wenn Benutzer genau eine Option aus einer Auswahl auswählen müssen.

WCAG AA

Funktionen

  • Layout-Optionen: Radiobuttons in einer Zeile oder Spalte anzeigen.

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

  • Optionale Icons: Zu einzelnen Optionen können Icons hinzugefügt werden.

  • Einzelne Zustände: Jedes Optionsfeld kann deaktiviert werden.

HTML

Verwendung

Die Komponente wird über das radio_group Tag eingebunden.

{% load insight_tags %} {% radio_group config=example_radio current_value=value %} <!-- or --> {% radio_group name="radio-example1" label="" items=items as_row=True %}

Parameter

Laden…

config (RadioGroupConfig 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
as_row bool

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

 True False
current_value str

Der Wert des aktuell ausgewählten Radio-Buttons.

 "" False
RadioGroupConfig( name="model", label="Select AI Model:", items=[ RadioItemConfig(tag_id="gpt4", value="gpt-4", label="GPT-4"), RadioItemConfig(tag_id="claude", value="claude", label="Claude"), RadioItemConfig(tag_id="llama", value="llama", label="LLaMA", disabled=True), ], current_value="claude", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Element <label> umschließt das Element <input> und erzeugt so eine implizite Zuordnung.

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

  • Der Text der Legende wird von Screenreadern als Gruppenbezeichnung vorgelesen.

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

  • help_text and error are rendered after the legend and linked to the <fieldset> (role='radiogroup') via aria-describedby; an error also sets aria-invalid='true' and aria-errormessage on the fieldset.

Verwandte Themen