Appearance Settings

You can control the appearance of the RadioButtonGroup button by setting the following attribute:

• Size

Size

Change the size of the radio buttons by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Button.Size class:

Class members	Manual declarations
Small	sm
Medium	md
Large	lg

The built-in sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();


    @foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikRadioGroup Size="@size"
                               Data="@Options"
                               @bind-Value="@ChosenOption">
            </TelerikRadioGroup>
        </div>
    }
}

@code{
    string ChosenOption { get; set; }

    List<string> Options { get; set; } = new List<string>()
    {
        "first", "second", "third"
    };
}

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.