ASP.NET Core NumericTextBox Overview
The NumericTextBox is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI NumericTextBox TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI NumericTextBox widget.
The NumericTextBox allows the user to select numeric values through direct input or by using spinner buttons.
Initializing the NumericTextBox
The following example demonstrates the basic configuration for the NumericTextBox.
@(Html.Kendo().NumericTextBox()
.Name("numerictextbox") // The name of the NumericTextBox is mandatory. It specifies the "id" attribute of the widget.
.Min(-100) // Set the min value of the NumericTextBox.
.Max(100) // Set the min value of the NumericTextBox.
.Value(10) // Set the value of the NumericTextBox.
)
<kendo-numerictextbox name="numerictextbox"
min="-100"
max="100"
value="10">
</kendo-numerictextbox>
Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
Basic Configuration
The NumericTextBox configuration options are passed as attributes.
@(Html.Kendo().NumericTextBox<decimal>()
.Name("currency")
.Format("c")
.Min(0)
.Enable(true)
.Max(100)
.Value(30)
)
<kendo-numerictextbox name="currency" format="c" min="0"
enable="true" max="100" value="30">
</kendo-numerictextbox>
Functionality and Features
| Feature | Description |
|---|---|
| Formats | The format property of the NumericTextBox allows you to convert a number object to a human-readable string by using the culture-specific settings. |
| Labels | The Label() method enables you to associate the label HTML element with the NumericTextBox. |
| Globalization | The NumericTextBox comes with globalization support that allows you to use the component in apps all over the world. |
| Accessibility | The NumericTextBox is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |
| Input Restrictions | You can restrict the accepted value to a specific range and also control its precision. |
| Events | The NumericTextBox exposes the Change() and Spin() events that allow you to control its behavior. |
| Automatic Correction | You can configure whether the component will autocorrect the user's input when the Min and Max values are set. |
To learn more about the appearance, anatomy, and accessibility of the NumericTextBox, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Next Steps
- Getting Started with the NumericTextBox
Basic Usage of the NumericTextBox HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the NumericTextBox TagHelper for ASP.NET Core (Demo)
- NumericTextBox in Razor Pages