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.
The NumericTextBox component is part of Telerik UI for Blazor, a
professional grade UI library with 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use a Telerik Numeric Textbox for Blazor, add the TelerikNumericTextBox tag.
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.
Component namespace and reference
@using Telerik.Blazor.Components
<TelerikNumericTextBox @ref="myNumericTextboxRef" @bind-Value="CurrentValue"></TelerikNumericTextBox>
@code {
//determines the type of the component
private int CurrentValue { get; set; }
//the type of the value variable determines the type of the reference
private Telerik.Blazor.Components.TelerikNumericTextBox<int> myNumericTextboxRef;
}
The numeric textbox provides the following features:
Arrows- whether the up/down spinner arrows (buttons) will be shown. Defaults totrue.Decimals- how many decimal places will be allowed while the user is typing a new value. Takes effect only while the input is focused. The default value is set from the specified culture.Format- the format with which the number is presented when the input is not focused. Read more in the Standard Numeric Format Strings in .NET article.Id- renders as theidattribute on the<input />element, so you can attach a<label for="">to the input.Max- the maximum decimal value the input can take. Must be of the same type as theValue.Min- the minimum decimal value the input can take. Must be of the same type as theValue.Step- the decimal value of the step with which the value changes when the arrows are used. Must be of the same type as theValue.Value- to get/set the value of the input.Width- the width of the component. See the Dimensions article.TabIndex- maps to thetabindexattribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with theTabkey.Validation - see the Input Validation article.
Example of using a 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)";
}
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
Formatand in theDecimalsparameters. 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 value12.3mandStep=0.1mit will render as12.3due to theMath.Round()behavior in .NET. Changing the value with the spinner icons up and then down will result in12.30because 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; }