Blazorise Radio component

Let users choose one option from a visible set of related choices.

Use radio buttons when users should compare a small set of mutually exclusive options before choosing one.

Structure

A RadioGroup groups Radio components that share a single selected value.

  • <RadioGroup>Coordinates selection across the options.
    • <Radio>One selectable option.

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. 
<Field>
    <RadioGroup TValue="string" Name="colors">
        <Radio Value="@("red")">Red</Radio>
        <Radio Value="@("green")">Green</Radio>
        <Radio Value="@("blue")">Blue</Radio>
    </RadioGroup>
</Field>

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>
    <FieldBody>
        <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>
    </FieldBody>
</Field>

@code {
    string shippingSpeed = "express";
}

RadioGroup Buttons

By setting the Buttons flag, radios will be grouped together and will appear as buttons. 
<Field>
    <RadioGroup TValue="string" Name="colors" Buttons>
        <Radio Value="@("red")">Red</Radio>
        <Radio Value="@("green")">Green</Radio>
        <Radio Value="@("blue")">Blue</Radio>
    </RadioGroup>
</Field>

Button colors

Changing the color of the radio buttons is as simple as setting the Color attribute on a Radio component. 
<Field>
    <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>
</Field>

Custom colorsAdded in v2.3

Set a custom color on a radio button group or override individual buttons. 
<Field>
    <RadioGroup TValue="string" Name="custom-colors" Buttons Color="@("#DBB5E6")" Value="@("lavender")">
        <Radio Value="@("lavender")">Lavender</Radio>
        <Radio Value="@("indigo")" Color="@(new Color("#312E81"))">Indigo</Radio>
        <Radio Value="@("accent")" Color="@CssColor.Variable("--accent", "#34D399")">Accent</Radio>
        <Radio Value="@("disabled")" Color="@("#FDE68A")" Disabled>Disabled</Radio>
    </RadioGroup>
</Field>

Binding

Two-way binding

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

@code{
    string checkedValue = "green";
}

Manual event binding

<Field>
    <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>
</Field>

@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