RadioButtonList
Auswahl-Liste mit Radio-Buttons. Unterstützt beliebige Werttypen (string, int, …), vertikale und horizontale Ausrichtung, Disabled-Zustand, AfterValueChanged, AutoSaveCallback und Validierung per DataAnnotations.
Ausrichtung
Die Ausrichtung der Radio-Buttons wird überOrientation gesteuert: Vertical (Standard) oder Horizontal.
Vertikal
Auswahl: Grün
Horizontal
Auswahl: M
Werttypen
Die Komponente ist generisch (TItem, TValue) – TValue kann jeder vergleichbare Typ sein, z.B. string, int? oder Enum-Werte.
string
Auswahl: Kreditkarte
int?
Auswahl: 2
Zustände
Keine Vorauswahl:Value ist null – kein Button ist initial markiert.Disabled: Alle Buttons sind gesperrt, der Wert ist nicht änderbar.
Keine Vorauswahl
Auswahl: –
Disabled
Nicht veränderbar
AfterValueChanged
AfterValueChanged wird nach jeder Wertänderung ausgelöst – unabhängig von Validierung. Nützlich für reaktive UI-Updates.
Callback zählen
Änderungen: 0×
AutoSaveCallback
AutoSaveCallback wird nach jeder Wertänderung ausgelöst – standardmäßig nur wenn das Feld gültig ist (TriggerAutoSaveCallbackOnlyIfValid).
AutoSave bei Änderung
Gespeichert: –
Validierung mit DataAnnotations
Integration inEditContext via Form-Komponente und DataAnnotationsValidator. ShowValidationTooltip zeigt die Fehlermeldung inline am Feld.
class & style
Beliebige HTML-Attribute (class, style, data-*, aria-*) werden an den Wrapper durchgereicht.
class
style
data-testid
SKILL.md – Radiobuttonlist
--- name: RadioButtonList description: Onesown Blazor Komponente RadioButtonList (Inputs). Verwende diesen Skill wenn du die RadioButtonList-Komponente verwenden, konfigurieren oder debuggen moechtest. --- # RadioButtonList **Namespace:** `Onesown.Blazor.Components` **Kategorie:** Inputs **Basisklasse:** `FormControlBase` **Generisch:** Ja (`RadioButtonList<TItem>` o.ae.) Generische Radio-Button-Gruppe für Einzelauswahl aus einer Liste von Einträgen mit DataAnnotations-Validierung. Unterstützt horizontale und vertikale Anordnung; Listenelemente müssen "Text"- und "Value"-Properties besitzen. **Live-Demo:** https://components.schini.com/demo/radiobuttonlist ## Parameter | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Value`` | ``TValue`` | | Aktuell gebundener Wert (der Value der gewählten Option). | | ``ValueChanged`` | ``EventCallback<TValue>`` | | EventCallback für Two-Way-Binding mit @bind-Value. Wird nach jeder Auswahländerung ausgelöst. | | ``ValueExpression`` | ``Expression<Func<object>>`` | | LINQ-Expression auf die gebundene Model-Property. Wird benötigt für DataAnnotations-Validierung und Label. | | ``Items`` | ``List<TItem>`` | ``new()`` | Liste der auswählbaren Elemente. Jedes Element muss eine "Text"- (Anzeige) und "Value"-Property (gebundener Wert) haben. | | ``Orientation`` | ``RadioButtonListOrientation`` | ``RadioButtonListOrientation.Vertical`` | Anordnung der Radio-Buttons. Mögliche Werte: Vertical (Standard), Horizontal. | | ``Disabled`` | ``bool`` | | Deaktiviert alle Radio-Buttons: keine Auswahl möglich, ausgegraut. Standard: false. | ## Geerbte Parameter (FormControlBase) | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. | | ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). | | ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. | | ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. | | ``Label`` | ``string`` | | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. | | ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). | | ``AutoSaveCallback`` | ``EventCallback`` | | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. | | ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. | | ``AfterValueChanged`` | ``EventCallback`` | | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. | | ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. | ## Hinweise - Immer @bind-Value für Two-Way-Binding verwenden - Für Formular-Validierung ValueExpression="() => _model.Property" setzen - Komponente muss innerhalb eines <Form>- oder <EditForm>-Containers liegen, damit der EditContext greift - AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard) - AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit - ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld - TItem ist die Listenelement-Klasse (muss "Text"- und "Value"-Properties haben), TValue der gebundene Werttyp - Horizontale Anordnung: Orientation="RadioButtonListOrientation.Horizontal" - Deaktivieren: Disabled="true" sperrt alle Radio-Buttons - Validierung: ValueExpression wird benötigt um DataAnnotations auszuwerten - Wert wird via @bind-Value gebunden; nur ein Wert gleichzeitig auswählbar