# Radio

> AstrolRadioGroup and AstrolRadio: Blazor radio options on top of the native input, of any type, in a column or a row, with @bind-Value and EditForm validation.

Source page: https://doc.astrolui.com/form/radio

One option among several, with the theme look.

## 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.

```razor
@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 {
```

```csharp
    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.