ClassicSidebar Layout

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 über Orientation 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:

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 in EditContext via Form-Komponente und DataAnnotationsValidator. ShowValidationTooltip zeigt die Fehlermeldung inline am Feld.

Pflichtfeld
Pflichtfeld (int?)

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 &lt;Form&gt;- oder &lt;EditForm&gt;-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


Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.