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>
Important Note:
For the
RadioGroup
and Radio
components to work correctly, the TValue
type must match across both. This is especially important when using nullable types, as mismatched types can lead to unexpected behavior.
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 theButtons
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 theColor
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=""> <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="" CheckedValueChanged=""> <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; } }