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

Appearance Settings

Updated over 6 months ago

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

Size

You can increase or decrease the size of the TextBox by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.TextBox.Size class. The Size parameter determines styles like padding and font-size, but is not related to the separate Width parameter.

Class members	Manual declarations
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`

Built-in TextBox sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.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();

        <span style="margin-left: 2em;">Size <code>&quot;@size&quot;</code></span>
        <TelerikTextBox @bind-Value="@TextBoxValue" Size="@size" Width="120px"></TelerikTextBox>
    }
}

@code{
    private string TextBoxValue { get; set; } = "TextBox Value";
}

Rounded

The Rounded attribute applies the border-radius CSS rule to the textbox to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.TextBox.Rounded class:

Class members	Manual declarations
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`
`Full`	`full`

Built-in values of the TextBox Rounded parameter

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.Rounded)
        .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 rounded = field.GetValue(null).ToString();

        <TelerikTextBox @bind-Value="@TextBoxValue" Rounded="@rounded" Width="120px"></TelerikTextBox>
        <span>Rounded <code>&quot;@rounded&quot;</code></span>
        <br /><br />
    }
}

@code{
    private string TextBoxValue { get; set; } = "TextBox Value";
}

FillMode

The FillMode controls how the TelerikTextBox is filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.TextBox.FillMode class:

Class members	Result
`Solid` default value	`solid`
`Flat`	`flat`
`Outline`	`outline`

Built-in TextBox fill modes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.TextBox.FillMode)
        .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 fillMode = field.GetValue(null).ToString();

        <TelerikTextBox @bind-Value="@TextBoxValue" FillMode="@fillMode" Width="120px"></TelerikTextBox>
        <span>FillMode <code>&quot;@fillMode&quot;</code></span>
        <br /><br />
    }
}

@code{
    private string TextBoxValue { get; set; } = "TextBox Value";
}

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.