Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxRadio<TValue>.Alignment Property

Specifies the position of the radio button’s label relative to the container boundaries.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public override CheckBoxContentAlignment Alignment { get; set; }

#Property Value

Type Description
CheckBoxContentAlignment

A CheckBoxContentAlignment enumeration value.

Available values:

Name Description
Default

The component’s content is aligned according to outer styles a user applies.

Left

The component’s content is aligned to the left of the component’s root element.

Right

The component’s content is aligned to the right of the component’s root element.

Center

The component’s content is aligned to the center of the component’s root element.

SpaceBetween

The component’s content uses the justify-content: space-between alignment.

SpaceAround

The component’s content uses justify-content: space-around alignment.

#Remarks

Use the Alignment and LabelPosition properties to change content position:

Razor
<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

See Also