ASP.NET MVC NumericTextBox Overview
The NumericTextBox is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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.
)
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)
)
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 MVC (Demo)