Display RadioGroup Items on One Line

Environment

Product

RadioGroup for Blazor

Description

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

Solution

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"
                   Value="@SelectedItem"
                   Layout="RadioGroupLayout.Horizontal"
                   Class="inline-radiogroup" />

... After RadioGroup

<style>
    .k-radio-list.inline-radiogroup {
        display: inline-flex;
        vertical-align: middle;
    }
</style>

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

    string SelectedItem { get; set; } = "Email";
}