Skip to main content

DxRadioGroup<TData, TValue> Class

A component that generates a radio button group based on a bound collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor


public class DxRadioGroup<TData, TValue> :

Type Parameters

Name Description

The data item type.


The value type.


The DevExpress Radio Group for Blazor (<DxRadioGroup>) allows you to create a group of radio buttons. A user can select only one button in the group at a time.

RadioGroup - Overview

Run Demo: RadioGroup - Overview


As an alternative, you can use the DevExpress Radio Button component (<DxRadio>). The Radio Button component allows you to create and customize radio buttons individually, while the Radio Group component allows you to generate a set of radio buttons based on a collection.

Add a Radio Group to a Project

Follow the steps below to add the Radio Group component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxRadioRadio></DxRadioGroup> markup to a .razor file.
  3. Configure the component: bind it to a data collection and customize layout and appearance options as described below.

Bind to Data

The Radio Group component generates and arranges radio items based on a collection (the Items property).

<DxRadioGroup Items="@Languages"
<p>Preferred language:

@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };

Run Demo: RadioGroup - Overview View Example: Change visibility of the DxFormLayout's items and groups conditionally


Use the Layout property to specify whether the Radio Group component arranges items vertically or horizontally.

<DxRadioGroup Items="@Languages"

@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };

RadioGroup - Layout

Run Demo: RadioGroup - Layout

Content Position

Use the following properties to change content position:

  • ItemAlignment - Specifies the position of item labels relative to the container boundaries.
  • ItemLabelPosition - Specifies the position of item labels relative to clickable circles.
<div style="width:400px">
    <DxRadioGroup Items="@Languages"

@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };

RadioGroup - Content Position

Item Template

The Radio Group component contains the ItemTemplate property that allows you to customize item labels.

<label id="group-label">Select your drink:</label>
<DxRadioGroup Items="@Drinks"
    <ItemTemplate>@context.ProductName @GetDrinkState(context)</ItemTemplate>
    You have selected:

@code {
    int SelectedDrinkId { get; set; } = 2;
    IEnumerable<Product> Products { get; set; }
    IEnumerable<Product> drinks;

    IEnumerable<Product> Drinks {
        get => drinks;
        set {
            drinks = value;

    protected override async Task OnInitializedAsync() {
        Products = await NwindDataService.GetProductsAsync();
        Drinks = Products.Where(p => p.CategoryId == 1).Take(5).AsEnumerable();

    string GetDrinkState(Product product) => product.InStock ? $"({product.UnitsInStock} units left)" : "(out of stock)";

    string GetDrinkName() => Drinks.First(p => p.ProductId == SelectedDrinkId).ProductName;

RadioGroup - Item Template

Run Demo: RadioGroup - Item Template

Disable Radio Buttons

The Radio Group component supports disabled mode. The EnabledFieldName property specifies the data source field that contains an enabled flag for component items. A user cannot focus or select disabled items.

Input Validation

You can add a standalone Radio Group component or Form Layout component to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

<EditForm Model="@starship"
    <DataAnnotationsValidator /> 
    <label id="group-label">Engine Type:</label>
    <DxRadioGroup @bind-Value="@starship.Engine"
    <ValidationMessage For="@(() => starship.Engine)" />

@code {
    // ...
    Starship starship = new() {
        ProductionDate = DateTime.Now + TimeSpan.FromDays(1),
        Description = "Default description"

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation - Custom Form


DxRadioGroup<TData, TValue>
See Also