NumericTextBox Overview

The NumericTextBox converts an <input> element into a numeric, percentage, or currency textbox.

By default, the widget renders Spin buttons which increase or decrease the value with a predefined step.

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

Download Free Trial

• Demo page for the NumericTextBox

Basic Usage

The NumericTextBox provides a set of default API configuration options which can be set during its initialization such as minimum and maximum values, incremental steps, and so on.

The following example demonstrates how to create a NumericTextBox and set some of its configuration options.

 <input id="textbox">

 <script>
    $("#textbox").kendoNumericTextBox({
        value: 10,
        min: -10,
        max: 100,
        step: 0.75,
        format: "n",
        decimals: 3
    });
</script>

Initializing the NumericTextBox

Upon its initialization, the NumericTextBox wraps the <input> element with a <span> tag and renders its Spin buttons.

To get a reference to the NumericTextBox, always use id instead of a class selector. Behind the scenes, the NumericTextBox creates a secondary element that represents the visual look of the widget and copies all non-id attributes including the class. When you use the class for referencing the widget, this behavior causes unexpected results.

The following example demonstrates how to initialize the NumericTextBox.

<input id="textBox" />

<script>
    $(document).ready(function(){
        $("#textBox").kendoNumericTextBox();
    });
</script>

Functionality and Features

• Formats
• Input Restrictions
• Globalization
• Accessibility

For more information on the known limitations of the NumericTextBox, refer to this article.

Events

For a complete example on the basic NumericTextBox events, refer to the demo on using the events of the NumericTextBox.

See Also

• Basic Usage of the NumericTextBox (Demo)
• Using the Basic Events of the NumericTextBox (Demo)
• Binding the NumericTextBox over MVVM (Demo)
• Using the NumericTextBox with AngularJS Directives (Demo)
• Applying the NumericTextBox API (Demo)
• JavaScript API Reference of the NumericTextBox
• Known Limitations in the NumericTextBox