Blazor Input Radio

The Blazor Input Radio allows the user to select one option from a set. Blazor Input Radio components are generally used in a group — a collection of radio buttons describing a set of related options.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component featuresLearn about input component features

Radio group (no initial value)

Radio group selected value:
<BlazorRadioGroup @bind-Value="RadioCollection1">
    <RadioTemplate Context="item">
        <BlazorLabel>
            <BlazorInputRadio @bind-Value="item" />
            @item.Label
        </BlazorLabel>
    </RadioTemplate>
</BlazorRadioGroup>
<div>Radio group selected value: @RadioCollection1.GetSelectedItem()</div>

@code {
    public RadioCollection<string> RadioCollection1 { get; set; } = new()
    {
        new()
        {
            Item = "Radio1",
            Label = "Radio 1"
        },
        new()
        {
            Item = "Radio2",
            Label = "Radio 2"
        }
    };
}

Radio group (with initial value)

Radio group selected value: 2
<BlazorRadioGroup @bind-Value="RadioCollection2">
    <RadioTemplate Context="item">
        <BlazorLabel>
            <BlazorInputRadio @bind-Value="item" />
            @item.Label
        </BlazorLabel>
    </RadioTemplate>
</BlazorRadioGroup>
<div>Radio group selected value: @RadioCollection2.GetSelectedItem()</div>

@code {
    public RadioCollection<int> RadioCollection2 { get; set; } = new()
    {
        new()
        {
            Item = 1,
            Label = "Radio 1"
        },
        new()
        {
            Item = 2,
            Label = "Radio 2",
            Selected = true
        }
    };
}

Radio group variants

Radio group selected value: Primary
<BlazorRadioGroup @bind-Value="RadioCollection3">
    <RadioTemplate Context="item">
        <BlazorLabel>
            <BlazorInputRadio @bind-Value="item" Variants="(string[]) item.Resource" />
            @item.Label
        </BlazorLabel>
    </RadioTemplate>
</BlazorRadioGroup>
<div>Radio group selected value: @RadioCollection3.GetSelectedItem()</div>

@code {
    public RadioCollection<string> RadioCollection3 { get; set; } = new()
    {
        new()
        {
            Item = "Primary",
            Label = "Primary",
            Selected = true,
            Resource = new[] {BaseVariants.Primary}
        },
        new()
        {
            Item = "Secondary",
            Label = "Secondary",
            Resource = new[] {BaseVariants.Secondary}
        },
        new()
        {
            Item = "Info",
            Label = "Info",
            Resource = new[] {BaseVariants.Info}
        },
        new()
        {
            Item = "Warning",
            Label = "Warning",
            Resource = new[] {BaseVariants.Warning}
        },
        new()
        {
            Item = "Danger",
            Label = "Danger",
            Resource = new[] {BaseVariants.Danger}
        },
        new()
        {
            Item = "Success",
            Label = "Success",
            Resource = new[] {BaseVariants.Success}
        }
    };
}

Disabled input:

<BlazorRadioGroup @bind-Value="RadioCollection4">
    <RadioTemplate Context="item">
        <BlazorLabel>
            <BlazorInputRadio @bind-Value="item" @bind-disabled="item.Resource" />
            @item.Label
            <BlazorButton type="button" @onclick="_ => item.Resource = !(bool)item.Resource" Variants="(bool)item.Resource?new[] {BaseVariants.Success}:new[] {BaseVariants.Danger}">@((bool)item.Resource ? "Enable" : "Disable")</BlazorButton>
        </BlazorLabel>
    </RadioTemplate>
</BlazorRadioGroup>

@code {
    public RadioCollection<string> RadioCollection4 { get; set; } = new()
    {
        new()
        {
            Item = "Radio1",
            Label = "Radio1",
            Selected = true,
            Resource = false
        },
        new()
        {
            Item = "Radio2",
            Label = "Radio2",
            Resource = false
        },
        new()
        {
            Item = "Radio3",
            Label = "Radio3",
            Resource = false
        },
        new()
        {
            Item = "Radio4",
            Label = "Radio4",
            Resource = true
        },
        new()
        {
            Item = "Radio5",
            Label = "Radio5",
            Resource = true
        },
        new()
        {
            Item = "Radio6",
            Label = "Radio6",
            Resource = true
        }
    };
}

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorInputRadio.invalid border-danger
BlazorInputRadio.valid border-success
BlazorInputRadio.primary accent-primary
BlazorInputRadio.secondary accent-secondary
BlazorInputRadio.success accent-success
BlazorInputRadio.danger accent-danger
BlazorInputRadio.warning accent-warning
BlazorInputRadio.info accent-info

Parameters

BlazorRadioGroup

Name Type Description
Value RadioCollection<T> The value of the input.

BlazorInputRadio

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
Value RadioItem<T> The value of the input.
UpdateOnHtmlEvent string This parameter allows you to specify which HTML event should trigger a re-render or update of the component. When the specified event occurs on the input element, the component will initiate the parsing process, updating its internal value to reflect the UI input. Default event is onchange.
ValueParsed EventCallback<ParseEventArgs> Specify an action or method to be executed when the component parses a value, whether the parsing operation succeeds or fails.
FieldState FieldState Represents the state of a field or input element within the component. Can be used to track and manage the state of the field and display relevant messages to the user.
ParseValueHandler Func<string?, TValue?> Implement specialized parsing logic for the component, such as handling user input, converting strings to specific data types, which corresponds to the type of the Value parameter in the component and performing validation during the parsing process.

Methods

RadioCollection<T>

Name Description
GetSelectedItem() Returns the item of type T, where the item represents the choice that has been selected by the user in the radio group.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙