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

Red

Green

Blue

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

Red

Green

Blue

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

Red Green Blue

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

Binding

Two-way binding

Red

Green

Blue

<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

Red

Green

Blue

<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;
    }
}

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`