blazor-devexpress-dot-blazor-dot-dxradiogroup-2.md
A component that generates a radio button group based on a bound collection.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxRadioGroup<TData, TValue> :
DxDataEditor<TValue>
| Name | Description |
|---|---|
| TData |
The data item type.
| | TValue |
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.
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.
Follow the steps below to add the Radio Group component to an application:
<DxRadioRadio>…</DxRadioGroup> markup to a .razor file.Refer to the following list for the component API reference: DxRadioGroup Members.
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.
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
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" };
}
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 class="w-400">
<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" };
}
.w-400 {
width: 400px;
}
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
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.
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 additional information, refer to the following help topic: Validate Input.
Run Demo: Form Validation - Custom Form
Object ComponentBase DxComponentBase DxDataEditor<TValue> DxRadioGroup<TData, TValue>
See Also