Blazorise Radio component

The Radio allow the user to select a single option from a group.

Radio Button Group allows the user to select exactly one value from a list of related, but mutually exclusive, options.

Structure

  • <RadioGroup> main component for grouping radios.

    • <Radio> radio button, which can be grouped or standalone.

Examples

Basic RadioGroup

RadioGroup is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group. 
<RadioGroup TValue="string" Name="colors">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

Standalone Radio

Radio can also be used standalone, without the RadioGroup wrapper. 
<Radio TValue="string" Group="colors" Value="@("red")">Red</Radio>
<Radio TValue="string" Group="colors" Value="@("green")">Green</Radio>
<Radio TValue="string" Group="colors" Value="@("blue")">Blue</Radio>

RadioGroup Buttons

By setting the Buttons flag, radios will be grouped together and will appear as buttons. 
<RadioGroup TValue="string" Name="colors" Buttons>
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

Custom Button Colors

Changing the color of the radio buttons is as simple as setting the Color attribute on a Radio component. 
<RadioGroup TValue="string" Name="side" Buttons>
    <Radio Value="@("left")" Color="Color.Danger">Left</Radio>
    <Radio Value="@("middle")" Color="Color.Warning">Middle</Radio>
    <Radio Value="@("right")" Color="Color.Success">Right</Radio>
</RadioGroup>

Binding

Two-way binding

<RadioGroup TValue="string" Name="colors" @bind-CheckedValue="@checkedValue">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

@code{
    string checkedValue = "green";
}

Manual event binding

<RadioGroup TValue="string"
            Name="colors"
            CheckedValue="@checkedValue"
            CheckedValueChanged="@OnCheckedValueChanged">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

@code{
    string checkedValue = "green";

    Task OnCheckedValueChanged( string value )
    {
        checkedValue = value;

        return Task.CompletedTask;
    }
}

API

On this page