Blazor Numeric Textbox Overview

The Blazor Numeric Textbox component allows the user to enter decimal values and no text. The developer can control minimum, maximum values, steps and other elements of the UX.

Telerik UI for Blazor Ninja image

The NumericTextBox component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Numeric Textbox

  1. Add the TelerikNumericTextBox tag to your razor page.
  2. Bind a numeric data type to the component
  3. Optionally, set custom Format, Min, Max and Step values

Basic numeric textbox with its key features

The new value is: @theValue

<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>

@code {
     private decimal theValue { get; set; } = 1.234m;
}

The Numeric TextBox component is generic, meaning that it takes the type of its value parameter as an argument. It can take int, long, float, double and decimal values. Therefore, the values for the Min, Max and Step properties must be of the same type as the Value, and the ValueChanged handler must also accommodate the corresponding value type.

Events

The Blazor Numeric TextBox generates events that you can handle and further customize its behavior. Read more about the Blazor Numeric TextBox events....

Validation

You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....

Custom Format Strings

The Blazor Numeric TextBox allows you to define your desired custom format throu its Format parameter. Here are some examples of using custom format strings.

@Weight
<br />
<TelerikNumericTextBox Format="#.00 kg" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@Weight"></TelerikNumericTextBox>
<br />
@code{
    decimal Weight { get; set; } = 3.456789m;
}

@Rent
<br />
<TelerikNumericTextBox Decimals="2" Format="@RentFormat" @bind-Value="@Rent"></TelerikNumericTextBox>
<br />
@code{
    decimal Rent { get; set; } = 4567.89m;
    string RentFormat { get; set; } = System.Globalization.NumberFormatInfo.CurrentInfo.CurrencySymbol + "#.00 a year";
}

@Units
<br />
<TelerikNumericTextBox Decimals="0" Format="@UnitsFormat" @bind-Value="@Units"></TelerikNumericTextBox>

@code{
    int Units { get; set; } = 12;
    string UnitsFormat { get; set; } = "# unit(s)";
}

Numeric Textbox Parameters

Attribute Type and Default Value Description
Arrows bool
(true)
Controls the display of the up/down spinner arrows (buttons).
Autocomplete string The autocomplete attribute on the <input /> element.
DebounceDelay int
(150)
The time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries.
Decimals int The number of allowed decimal places during typing. Takes effect only while the input is focused. The default value depends on the culture.
Format string The number format when the input is not focused. Read more at Standard Numeric Format Strings in .NET
Id string The id attribute on the <input /> element.
InputMode string The inputmode attribute on the <input /> element.
Max numeric type The maximum value the input can accept. Must match the Value type.
Min numeric type The minimum value the input can accept. Must match the Value type.
Placeholder string The placeholder attribute of the HTML element. The placeholder will appear if the component is bound to a nullable value type and there is no value set.
Step numeric type The decimal value with which the value changes when using the arrows. Must maatch the Value type.
Value numeric type The component value.
TabIndex int? The tabindex attribute of the <input /> element. Use it to customize the tabbing order on your page.
ValidateOn ValidationEvent enum
(Input)
The event that will trigger validation (if validation is enabled). Read more at Validastion Modes for Simple Inputs.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Numeric TextBox:

Attribute Type and Default Value Description
Class string The CSS class that will be rendered on the <span class="k-numerictextbox"> element.
Width string The width of the component in any supported CSS unit.

Find more options for customizing the Numeric TextBox styling in the Appearance article.

Component Reference

The NumericTextBox has a FocusAsync method that enables programmatic focus. To use it, obtain reference to the component instance.

<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>

<TelerikNumericTextBox @ref="@NumericTextBoxRef"
                       @bind-Value="DecimalValue"
                       Width="200px" />

@code {
    //determines the type of the component
    private decimal DecimalValue { get; set; }

    //the Value type determines the type of the reference
    private TelerikNumericTextBox<decimal> NumericTextBoxRef { get; set; }

    async Task FocusTextBox()
    {
        await NumericTextBoxRef.FocusAsync();
    }
}

Notes

  • If you want to use a currency format, you must specify the culture for your app thread, so .NET knows what symbol to render. If you don't do that, you may see an unexpected/incorrect symbol or format. The Telerik Numeric Textbox uses the thread culture for currency signs and decimalr separators (more on globalization in the Telerik components).

  • You may want to match the decimal places available in the Format and in the Decimals parameters. This will unify the rounding of the numbers when the input is focused and when it is not. For example, if you start with a value 12.3m and Step=0.1m it will render as 12.3 due to the Math.Round() behavior in .NET. Changing the value with the spinner icons up and then down will result in 12.30 because the value had had a second decimal digit at some point and that precision is added to the number already.

    Here is an example of matching the decimal places:

    Razor

    @DecimalStepValue.ToString("N2") <br />
    
    <TelerikNumericTextBox @bind-Value=@DecimalStepValue 
                           Step="0.01m" 
                           Decimals="2" 
                           Format="N2">
    </TelerikNumericTextBox>
    
    @code {
        decimal DecimalValue = 12.3m;
    }
    

Next Steps

See Also

In this article