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

Display RadioGroup Items on One Line


Product RadioGroup for Blazor


How can I add a RadioGroup component on the same line as other elements? By default the RadioGroup breaks on a new line.


The RadioGroup renders an <ul> element which is block-level by default and falls on a new line. Here is how to override the styling and make the RadioGroup remain on the same line:

  1. Set a CSS Class to the RadioGroup.
  2. Override the display: flex style of the <ul class="k-radio-list"> element to inline-flex.
  3. Optionally, apply a vertical-align style to line up the component with the other elements next to it.

Inline RadioGroup

Before RadioGroup ...

<TelerikRadioGroup Data="@RadioItems"
                   Class="inline-radiogroup" />

... After RadioGroup

    .k-radio-list.inline-radiogroup {
        display: inline-flex;
        vertical-align: middle;

@code {
    List<string> RadioItems { get; set; } = new List<string> { "Phone", "Email", "Post" };

    string SelectedItem { get; set; } = "Email";
In this article