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

Attributes

RadioGroup

Name Description TypeDefault
TValue CheckedValue data type. generic
CheckedValue Gets or sets the checked value. TValuedefault
CheckedValueChanged Occurs when the checked value is changed. EventCallback<TValue>
Name Defines the radio group name. stringnull
Orientation Defines the orientation of the radio elements. OrientationHorizontal
Buttons Flag which indicates that radios will appear as button. boolfalse
Color Defines the color or radio buttons(only when Buttons is true). ColorSecondary

Radio

Name Description TypeDefault
TValue Data type of Checked value. Support types are bool and bool?. generic
Checked Gets or sets the checked value. TValuedefault
CheckedChanged Occurs when the checked value is changed. EventCallback<TValue>
Group Defines the radio group name. stringnull
Inline Group radios on the same horizontal row. boolfalse
Cursor Defines the mouse cursor based on the behavior by the current CSS framework. CursorDefault
Color Defines the color of a radio button(only when RadioGroup.Buttons is true). ColorSecondary
On this page