Blazor — New Radio Button and Radio Group (v23.1)

As you may already know, we recently added a Radio Button and Radio Group to our Blazor UI component suite.

Radio Button

Our Blazor Radio Button component allows you to create radio buttons and combine them into groups (since we use a standard approach, you can easily switch from <input type="radio"> elements to our Radio Button).

We’ve done our best to maximize flexibility and give you full control when using our Blazor Radio Button. You can customize radio buttons individually and position them as business needs dictate. To create a radio button, add the control markup (<DxRadio/>) to a page, specify a button value, and associate the button with a radio group/group value:

@foreach(var priorityLevel in PriorityLevels) { 
        <DxRadio GroupName="priorities-radio-group" 
                 @bind-GroupValue="@SelectedPriorityLevel" 
                 Value="@priorityLevel">
            @priorityLevel 
        </DxRadio>
    } 
    
@code { 
    string SelectedPriorityLevel { get; set; } = "normal"; 
    IEnumerable<string> PriorityLevels = new[] { "low", "normal", "urgent", "high" }; 
} 

Radio Group

The DevExpress Blazor Radio Group allows you to create a set of radio buttons based on a collection. If you already have a collection of options, you should use this component instead of Radio Button.

Our Radio Group component automatically arranges radio buttons on-screen. As such, you simply need to specify the desired layout: vertical or horizontal.

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

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

Disable Radio Buttons

To prevent users from focusing/selecting a specific radio button/item, disable the radio button using the DxRadio.Enabled or RadioGroup.EnabledFieldName property.

<legend>Select your drink:</legend> 
<DxRadioGroup Items="@Drinks" 
              @bind-Value="@SelectedDrinkId" 
              ValueFieldName="@nameof(Product.ProductId)" 
              EnabledFieldName="@nameof(Product.InStock)">
    <ItemTemplate>@context.ProductName @GetDrinkState(context)</ItemTemplate>
</DxRadioGroup>

Input Validaton

To apply input validation, place the Radio Button/Radio Group in a standard Blazor EditForm and validate user input (based on data annotation attributes defined in a model) as necessary.

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

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

Your Feedback Counts

Please take a moment to respond to the following survey question. Your answers will help us understand your needs and refine future Radio-related development plans.

Free DevExpress Products - Get Your Copy Today