DxRadioGroup<TData, TValue> Class

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRadioGroup<TData, TValue> :
    DxDataEditor<TValue>

Type Parameters

Name	Description
TData	The data item type.
TValue	The value type.

Remarks

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.

Run Demo: RadioGroup - Overview

Note

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.

API Reference

Refer to the following list for the component API reference: DxRadioGroup Members.

Static Render Mode Specifics

Blazor Radio Group does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

Bind to Data

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

<DxRadioGroup Items="@Languages"
              @bind-Value="@PreferredLanguage"/>
<p>Preferred language:
    <strong>@PreferredLanguage</strong>
</p>


@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

Layout

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

<DxRadioGroup Items="@Languages"
              @bind-Value="@PreferredLanguage"
              Layout="@RadioGroupLayout.Horizontal">
</DxRadioGroup>

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

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"
                  @bind-Value="@PreferredLanguage"
                  ItemLabelPosition="LabelPosition.Left"
                  ItemAlignment="CheckBoxContentAlignment.Right">
    </DxRadioGroup>
</div>

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

Item Template

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

Razor

<label id="group-label">Select your drink:</label>
<DxRadioGroup Items="@Drinks"
              @bind-Value="@SelectedDrinkId"
              ValueFieldName="@nameof(Product.ProductId)"
              EnabledFieldName="@nameof(Product.InStock)"
              aria-labelledby="group-label">
    <ItemTemplate>@context.ProductName @GetDrinkState(context)</ItemTemplate>
</DxRadioGroup>
<p>
    You have selected:
    <strong>@GetDrinkName()</strong>
</p>

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

    IEnumerable<Product> Drinks {
        get => drinks;
        set {
            drinks = value;
            InvokeAsync(StateHasChanged);
        }
    }

    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;
}

Product.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

public partial class Product {
    public Product() {
        OrderDetails = new HashSet<OrderDetail>();
    }
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public int? SupplierId { get; set; }
    public int? CategoryId { get; set; }
    public string QuantityPerUnit { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public bool InStock => !Discontinued;
    public virtual Category Category { get; set; }
    public virtual Supplier Supplier { get; set; }
    public virtual ICollection<OrderDetail> OrderDetails { get; set; }
}

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.

Razor

<EditForm Model="@starship"
          OnValidSubmit="@HandleValidSubmit"
          OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator /> 
    <label id="group-label">Engine Type:</label>
    <DxRadioGroup @bind-Value="@starship.Engine"
                  Items="@(Enum.GetValues(typeof(Engine)).Cast<Engine>())"
                  Layout="@RadioGroupLayout.Horizontal"
                  aria-labelledby="group-label"/>
    <ValidationMessage For="@(() => starship.Engine)" />
</EditForm>

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

Starship.cs

public class Starship {
    [Required(ErrorMessage = "You need an engine to fly."), EnumDataType(typeof(Engine))]
    public Engine? Engine { get; set; }
    // ...
}

Engine.cs

public enum Engine {
    Ion,
    Plasma,
    Fusion,
    Warp
}

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

Run Demo: Form Validation - Custom Form

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DxComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponent

DxDataEditor<TValue>

DxRadioGroup<TData, TValue>