New to Telerik UI for Blazor? Download free 30-day trial

RadioGroup Layout

The Blazor Radio Button Group component lets you render the list of options in a vertical or in a horizontal fashion.

By default, the list is vertical, and you can change that through the Layout parameter that takes a member of the Telerik.Blazor.RadioGroupLayout enum.

Horizontal and Vertical layouts in the Telerik Blazor Button Group Component

@* If you want a horizontal list, you can set the value directly to the parameter *@

<select @bind="@theLayout">
   <option value="@RadioGroupLayout.Horizontal">Horizontal</option>
   <option value="@RadioGroupLayout.Vertical">Vertical</option>
</select>
<br />
<TelerikRadioGroup Data="@Data" @bind-Value="@SelectedValue" Layout="@theLayout"></TelerikRadioGroup>
@code{
    RadioGroupLayout theLayout { get; set; } = RadioGroupLayout.Horizontal;

    int SelectedValue { get; set; } = 2;
    IEnumerable<int> Data { get; set; } = Enumerable.Range(1, 5);
}

Layouts in the ButtonGroup component

In the Horizontal layout mode, the individual items do not create a layout and so they will flow with their container's dimensions.

Items can fall on several lines in Horizontal layout when their container cannot fit them all

@* This code just creates 20 items and puts them in a container with small width *@

<div style="width: 500px; border: 1px solid red;">
    <TelerikRadioGroup Data="@RadioButtonsList"
                      @bind-Value="@SelectedValue"
                      Layout="@RadioGroupLayout.Horizontal">
    </TelerikRadioGroup>
</div>

@code{
    List<string> RadioButtonsList { get; set; } = Enumerable.Range(1, 20).Select(x => $"Item {x}").ToList();
    string SelectedValue { get; set; }
}

Horizontal Layout items flow in lines

See Also

In this article
Not finding the help you need? Improve this article