Radio component

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

Structure

• <RadioGroup>
  • <Radio>

Examples

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>

Usage

With bind attribute

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

With event

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

    void OnCheckedValueChanged( string value )
    {
        checkedValue = value;
    }
}

Attributes

RadioGroup

Name	Type	Default	Description
TValue	generic type		CheckedValue data type.
CheckedValue	boolean	false	Gets or sets the checked value.
CheckedValueChanged	event		Occurs when the checked value is changed.
Name	string	null	Sets the radio group name.
Orientation	Orientation	Horizontal	Defines the orientation of the radio elements.
Color	Color	Secondary	Defines the color or radio buttons(only when Buttons is true).

Radio

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