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

Appearance Settings

This article outlines the available Form parameters, which control its appearance.


You can increase or decrease the size of the Form by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Form.Size class:

The Size configuration of the Form affects the padding of all the editors and buttons.

Class members Manual declarations
Small sm
default value
Large lg

The built-in sizes

    var fields = typeof(Telerik.Blazor.ThemeConstants.Form.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;">
            <TelerikForm Model="@TestUser"
                    <FormItem Field="@nameof(User.FirstName)"></FormItem>
                    <FormItem Field="@nameof(User.LastName)"></FormItem>

    @code {

        public User TestUser { get; set; } = new User() {
            FirstName = "Johny",
            LastName = "Doe"

        public class User
            public string FirstName { get; set; }
            public string LastName { get; set; }

See Also

In this article