Blazor RadioGroup Overview

The Blazor RadioGroup component allows the user to select an option from a predefined set of choices in a list of radio buttons. The radio group is styled according to the Telerik Theme. You can also choose the layout order and label position.

The RadioGroup component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor RadioGroup

1. Add the <TelerikRadioGroup> tag to a Razor file.

2. Populate its Data property with the collection of items you want in the list.

3. Set the Value parameter to an object. It supports one-way and two-way binding.

4. Set the TextField and ValueField properties to point to the corresponding properties of the model.

Basic Radio Button Group configuration.

Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )
<br />

<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)">
</TelerikRadioGroup>

@code{
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female" },
        new GenderModel { GenderId = 2, GenderText = "Male" },
        new GenderModel { GenderId = 3, GenderText = "Other" },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
    }
}

Data Binding

The Blazor RadioGroup supports data binding to strings, value type data, and a model collection. Read more about the Blazor RadioGroup data binding.

Layout

The RadioGroup component provides two ways to render the list of options - in a vertical or in a horizontal fashion. Read more about the Blazor RadioGroup layouts.

Label Position

The RadioGroup component provides two ways to render the labels of the radio buttons - before or after the radio buttons. Read more about the Blazor RadioGroup label position.

Appearance Settings

The Blazor RadioGroup provides a Size parameter to customize the radio button dimensions. Read more about the Blazor RadioGroup appearance settings.

Templates

The RadioGroup item template allows customization of the content of each radio item.

Events

The Blazor RadioGroup fires blur and value change events to respond to user actions. Read more about the Blazor RadioGroup events.

RadioGroup Parameters

The Blazor RadioGroup provides various parameters to configure the component. Also check the RadioGroup public API.

Parameter	Type and Default Value	Description
Class	string	The custom CSS class for the main wrapping element, which is <ul class="k-radio-list">.
Enabled	bool (true)	Whether the component is enabled.
Id	string	The id attribute of the main wrapping element.
LabelPosition	RadioGroupLabelPosition enum (After)	Whether the labels render after or before the radio button itself.
Layout	RadioGroupLayout enum (Vertical)	Whether the buttons are rendered vertically or horizontally.
Name	string	Sets a name attribute to the <input type="radio"> elements.
TItem	object	The type of the model to which the component is bound. Required if you can't provide Data or Value. Determines the type of the reference object.
TValue	object	The type of the value field from the model to which the component is bound. Required if you can't provide Data or Value. Determines the type of the reference object.
TextField	string (Text)	The name of the field from the model that will be shown to the user.
ValueField	string (Value)	The name of the field from the model that will populate the underlying Value.
Value	object	The value of the component. Supports one and two-way binding. If the Value matches a ValueField value in the Data, the corresponding item from the data will be pre-selected.

See the Input Validation article for more details.

RadioGroup Reference and Methods

The RadioGroup provides a FocusAsync method that allows the application to focus the component programmatically. First, obtain reference to the component through its @ref attribute. Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips.

Using RadioGroup methods

<TelerikButton OnClick="@FocusRadioGroup">Focus RadioGroup</TelerikButton>

<TelerikRadioGroup @ref="@RadioGroupRef"
                   Data="@RadioGroupData"
                   @bind-Value="@RadioGroupValue"
                   ValueField="@nameof(ListItem.Id)"
                   TextField="@nameof(ListItem.Text)">
</TelerikRadioGroup>

@code{
    private TelerikRadioGroup<ListItem, int?> RadioGroupRef { get; set; }

    private int? RadioGroupValue { get; set; }

    List<ListItem> RadioGroupData { get; set; } = new List<ListItem>() {
        new ListItem { Id = 1, Text = "Foo" },
        new ListItem { Id = 2, Text = "Bar" },
        new ListItem { Id = 3, Text = "Baz" }
    };

    private async Task FocusRadioGroup()
    {
        await RadioGroupRef.FocusAsync();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }
}

Next Steps

• Bind the RadioGroup to Data
• Handle the RadioGroup Events
• Explore the RadioGroup Layouts
• Customize the RadioGroup Item Rendering with Templates

See Also

• Live RadioGroup Demos
• RadioGroup API Reference