DxRadioGroup<TData, TValue> Class

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Type Parameters

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

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.

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.

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

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.

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

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

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

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

Run Demo: Form Validation - Custom Form