1. Demo AstrolRadioGroup

AstrolRadioGroup holds the chosen value and each AstrolRadio is an option with its Value. The type is inferred (text, numbers, enums...). With focus on an option, the arrows change the option.

@using Astrol.Component.Basic.Form

<AstrolRadioGroup @bind-Value="payment" AriaLabel="Payment method">

 <AstrolRadio Value="@("card")" Text="Card" />

 <AstrolRadio Value="@("transfer")" Text="Bank transfer" />

 <AstrolRadio Value="@("cash")" Text="Cash" Disabled="true" />

</AstrolRadioGroup>

@* Any type: enums, numbers, objects... In a row with Horizontal *@

<AstrolRadioGroup @bind-Value="theme" Horizontal="true" AriaLabel="Theme">

 @foreach (var item in Enum.GetValues<AstrolThemeMode>())

 {

 <AstrolRadio Value="item" Text="@item.ToString()" />

 }

</AstrolRadioGroup>

@code {

 private string? payment = "card";

 private AstrolThemeMode theme = AstrolThemeMode.Auto;

}

Supported parameters

AstrolRadioGroup<TValue>

• Value (TValue), chosen value; binds with @bind-Value (validated inside an EditForm).
• Horizontal (bool), options in a row (default false, in a column).
• Disabled (bool), disables every option.
• Name (string), name attribute of the inputs (default: a unique one per group).
• AriaLabel (string), the group's question for screen readers.
• Class (string), extra css class.

AstrolRadio<TValue>

• Value (TValue), value of the option.
• Text (string) or ChildContent (RenderFragment), option text or content.
• Disabled (bool), disabled option.
• Id (string) and Class (string); other attributes go to the input.