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.
The NumericTextBox component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ 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
- Add the
TelerikNumericTextBox
tag to your razor page. - Bind a numeric data type to the component
- Optionally, set custom
Format
,Min
,Max
andStep
values
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.
Adornments
The component allows you to add custom elements as prefixes and suffixes. Read more about how to render custom adornments before and after the input element...
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 through the Format
parameter, for example:
@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 of the <input /> element. |
Max |
TValue * ( T.MaxValue ) |
The maximum value the input can accept. Must match the Value type. |
Min |
TValue * ( T.MinValue ) |
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. |
ReadOnly |
bool |
If set to true , the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
SelectOnFocus |
bool |
When set to true , the NumericTextBox will select its value when the component receives focus. |
ShowClearButton |
bool |
Defines if the user can clear the component value through an x button rendered inside the input. |
Step |
TValue * ( 1 ) |
The decimal value with which the component value changes when using the arrows. Must match the Value type. |
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 Validation Modes for Simple Inputs. |
Value |
TValue * |
The component value. |
* TValue
can be any numeric type, except nint
and nuint
. Note that all TValue
parameters must be of the same type.
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. |
To learn more about the appearance, anatomy, and accessibility of the Numeric TextBox, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Numeric TextBox Reference and Methods
The Numeric TextBox has a FocusAsync
method that enables programmatic focus. To use it, obtain a reference to the component instance through @ref
. Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips.
<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 decimal separators (more on globalization in the Telerik components).
-
You may want to match the decimal places available in the
Format
and in theDecimals
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 value12.3m
andStep=0.1m
it will render as12.3
due to theMath.Round()
behavior in .NET. Changing the value with the spinner icons up and then down will result in12.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; }