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

Right-align text in the Telerik inputs


Product AutoComplete for Blazor,
ComboBox for Blazor
DatePicker for Blazor
DateTimePicker for Blazor
NumericTextBox for Blazor,
TextBox for Blazor,
TimePicker for Blazor


How to align the text to the right or center in my inputs (such as textbox and numeric textbox).


You can use standard CSS customizations for inputs in the Telerik UI for Blazor. To make cascading of the styles easier, use the Class parameter and pass a custom CSS class. Use the text-align rule with a suitable selector.

The example below shows how to align a numeric textbox and a combo box to the right, and how to align a textbox to the center.

Change the text alignment for inputs in Telerik UI for Blazor

@* right align and center align text in inputs *@

    .myNumericTextbox .k-input-inner,
    .myCombobox .k-input-inner {
        text-align: right;

    .myTextbox .k-input-inner {
        text-align: center;

<h4>NumericTextBox - Right alignment</h4>
<TelerikNumericTextBox @bind-Value="@theValue" Class="myNumericTextbox"></TelerikNumericTextBox>

<h4>TextBox - Centered text</h4>
<TelerikTextBox @bind-Value="theTbValue" Class="myTextbox"></TelerikTextBox>

<h4>ComboBox - Right alignment</h4>
<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
                 Placeholder="Select an item..." ClearButton="true" Filterable="true" Class="myCombobox">

@code {
    decimal theValue { get; set; } = 1.234m;
    string theTbValue { get; set; } = "lorem ipsum";

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3;

    public class MyDdlModel
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }

The result from the code snippet above

change text alignment in the inputs

In this article