Radio component

<Radio> buttons allow the user to select one option from a set.

Use Radio buttons when the user needs to see all available options.

Structure

  • <RadioGroup>
    • <Radio>

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 TValue="string" Value="@("red")">Red</Radio>
    <Radio TValue="string" Value="@("green")">Green</Radio>
    <Radio TValue="string" 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="true">
    <Radio TValue="string" Value="@("red")">Red</Radio>
    <Radio TValue="string" Value="@("green")">Green</Radio>
    <Radio TValue="string" Value="@("blue")">Blue</Radio>
</RadioGroup>

Binding

Two-way binding

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

@code{
    string checkedValue = "green";
}

Manual event binding

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

@code{
    string checkedValue = "green";

    Task OnCheckedValueChanged( string value )
    {
        checkedValue = value;

        return Task.CompletedTask;
    }
}

Attributes

RadioGroup

Name Description Type Default
TValue CheckedValue data type. generic
CheckedValue Gets or sets the checked value. TValue default
CheckedValueChanged Occurs when the checked value is changed. EventCallback<TValue>
Name Defines the radio group name. string null
Orientation Defines the orientation of the radio elements. Orientation Horizontal
Buttons Flag which indicates that radios will appear as button. bool false
Color Defines the color or radio buttons(only when Buttons is true). Color Secondary

Radio

Name Description Type Default
TValue Data type of Checked value. Support types are bool and bool?. generic
Checked Gets or sets the checked value. TValue default
CheckedChanged Occurs when the checked value is changed. EventCallback<TValue>
Group Defines the radio group name. string null
Inline Group radios on the same horizontal row. bool false
Cursor Defines the mouse cursor based on the behavior by the current CSS framework. Cursor Default