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, used as an option inside a RadioGroup.

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>

Grouped radios

When the radio group answers one named question, enable Group on <Field> and keep using <FieldLabel>. In grouped mode, the label renders as a <legend> and becomes the semantic group label for the radio group.
Choose a shipping speed 
<Field Group>
    <FieldLabel>Choose a shipping speed</FieldLabel>
    <RadioGroup TValue="string" Name="shipping-speed" @bind-Value="@shippingSpeed">
        <Radio Value="@("standard")">Standard</Radio>
        <Radio Value="@("express")">Express</Radio>
        <Radio Value="@("overnight")">Overnight</Radio>
    </RadioGroup>
</Field>

@code {
    string shippingSpeed = "express";
}

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>

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-Value="@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" Value="@checkedValue" ValueChanged="@OnValueChanged">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

@code{
    string checkedValue = "green";

    Task OnValueChanged(string value)
    {
        checkedValue = value;

        return Task.CompletedTask;
    }
}

Best Practices

Exclusive Choices

Radio buttons are appropriate for a small set of mutually exclusive choices that benefits from being visible at the same time. Select a default only when one option is safe and genuinely appropriate for most users.

Provide Group Context

Place related options in a <RadioGroup> with a clear group label, and give every radio a concise standalone label. Use a Select when the list is long or space is constrained, and Check components when multiple selections are allowed.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page