Skip to main content

DxRadio<TValue> Class

An individual radio button that allows you to build radio groups with a custom item layout.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRadio<TValue> :
    RadioBase<TValue, TValue>,
    ISynchronizedRadio,
    ICheckBoxInternalOwner,
    IRequireSelfCascading

Type Parameters

Name Description
TValue

The value type.

Remarks

The DevExpress Radio Button for Blazor (<DxRadio>) allows you to create individual radio buttons and combine them into groups. A user can select only one button in a group at a time.

Radio - Overview

Run Demo

Note

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

Add a Radio Button to a Project

Follow the steps below to add a Radio Button 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 <DxRadio></DxRadio> markup to a .razor file.
  3. Specify a radio button value, the name of a radio group to which the button belongs, and a group value. Customize the radio button as your needs dictate (review instructions below).

Specify Radio Button Value, Group Name, and Group Value

The main Radio Button API members are listed below.

API Member Description
Value Specifies the radio button’s value.
GroupName Specifies the name of a radio group to which the radio button belongs. This property is required.
GroupValue Specifies the value of the selected radio button. You can use the @bind attribute to bind the GroupValue property to a data field. Refer to Two-Way Data Binding.

The following code snippet creates a simple radio group.

<div role="radiogroup">
    @foreach(var priorityLevel in PriorityLevels) {
        <DxRadio GroupName="priorities-radio-group"
                 @bind-GroupValue="@SelectedPriorityLevel"
                 Value="@priorityLevel">
            @priorityLevel
        </DxRadio>
    }
</div>

@code {
    string SelectedPriorityLevel { get; set; } = "normal";
    IEnumerable<string> PriorityLevels = new[] { "low", "normal", "urgent", "high" };
}

Radio - Simple Group

The following code snippet creates cascading radio groups. One group is visible at first (general-radio-group). The second group (aot-radio-group) appears if a user selects radio button 1 or 2 in the first group.

<fieldset role="radiogroup">
    <legend>Are you developing Blazor WebAssembly apps?</legend>
    @foreach(var option in GeneralAnswerOptions) {
        <DxRadio GroupName="general-radio-group"
                    @bind-GroupValue="@GeneralAnswer"
                    Value="@option">
            @option
        </DxRadio>
    }
</fieldset>
@if(AOTGroupVisible) {
    <fieldset role="radiogroup">
        <legend>Do you expect to enable AOT in your Blazor WebAssembly apps?</legend>
        @foreach(var option in AOTAnswerOptions) {
            <DxRadio GroupName="aot-radio-group"
                        @bind-GroupValue="@AOTAnswer"
                        Value="@option">
                @option
            </DxRadio>
        }
    </fieldset>
}

@code {
    string GeneralAnswer { get; set; }
    string AOTAnswer { get; set; }
    bool AOTGroupVisible => !string.IsNullOrEmpty(GeneralAnswer) && GeneralAnswer != GeneralAnswerOptions.Last();
    IEnumerable<string> GeneralAnswerOptions = new[] {
        "Yes.",
        "No, but I plan to develop a WebAssembly app in the near future.",
        "No."
    };
    IEnumerable<string> AOTAnswerOptions = new[] {
        "Yes, I already enabled it.",
        "Yes, I plan to enable it AOT in my WebAssembly app.",
        "No."
    };
}

Radio - Two Radio Groups

Run Demo: Radio - Overview

Note

To improve accessibility support, radio buttons must be grouped together in a radiogroup to indicate which ones affect the same value. Refer to the following topic for more information: ARIA: radiogroup role. See code examples above.

Customize Appearance

Use the following properties to customize radio button appearance:

API Member Description
Alignment Specifies the position of the radio button’s label relative to the container boundaries.
CssClass Specifies the name of the CSS class applied to the editor.
IconCssClass Specifies the name of the CSS class applied to the radio button’s icon.
LabelPosition Specifies the position of the button label relative to the clickable circle.
LabelWrapMode Specifies word wrap style for the label.

The following code snippet changes content position.

<div style="width:400px" role="radiogroup">
@foreach (var priorityLevel in PriorityLevels) {
    <DxRadio GroupName="priorities-radio-group"
             @bind-GroupValue="@SelectedPriorityLevel"
             Value="@priorityLevel"
             LabelPosition="LabelPosition.Left"
             Alignment="CheckBoxContentAlignment.Right">
        @priorityLevel
    </DxRadio>
}
</div>

@code {
    string SelectedPriorityLevel { get; set; } = "normal";
    IEnumerable<string> PriorityLevels = new[] { "low", "normal", "urgent", "high" };
}

RadioGroup - Content Position

The following code snippet applies different styles to radio buttons with different priority levels.

<fieldset role="radiogroup">
    @foreach(var priorityLevel in PriorityLevels) {
        <DxRadio GroupName="priorities-radio-group"
                    @bind-GroupValue="@SelectedPriorityLevel"
                    Value="@priorityLevel"
                    CssClass="@GetItemCssClass(priorityLevel)">
        </DxRadio>
    }
</fieldset>

@code {
    string SelectedPriorityLevel { get; set; } = "normal";
    IEnumerable<string> PriorityLevels = new[] { "low", "normal", "urgent", "high" };
    string GetItemCssClass(string priorityLevel) {
        var result = $"dx-demo-radio priority-{priorityLevel}";
        if(priorityLevel == SelectedPriorityLevel)
            result += " dx-demo-radio-selected";
        return result;
    }
}

Radio - Customize Appearance

Run Demo: Radio - Customize Appearance

Disable Radio Buttons

Radio buttons support disabled mode. Set the Enabled property to false to disable a radio button. A user cannot focus or select this radio button.

The following code snippet disables radio buttons conditionally (based on installed languages).

<fieldset role="radiogroup">
    <legend>Select your preferred language:</legend>
    @foreach (var language in Languages) {
        <DxRadio GroupName="disabled-option-radio-group"
                 @bind-GroupValue="@PreferredLanguage"
                 Value="@language"
                 Enabled="@IsLanguageInstalled(language)">
            @GetOptionLabel(language)
        </DxRadio>
    }
</fieldset>

@code {
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };
    bool IsLanguageInstalled(string language) => language != "Español";
    string GetOptionLabel(string language) {
        var result = language;
        if (!IsLanguageInstalled(language))
            result += " (not installed)";
        return result;
    }
}

Radio - Disabled Mode

Run Demo: Radio - Disable Options By Condition

Input Validation

You can add a standalone Radio 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.

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

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxDataEditor<TValue>
DevExpress.Blazor.Internal.Editors.RadioBase<TValue, TValue>
DxRadio<TValue>
See Also