Kendo UI for Angular NumericTextBox Overview

The Kendo UI for Angular NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons.

The NumericTextBox Component is part of Kendo UI for Angular, 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.

The following example demonstrates the NumericTextBox in action.

View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Restriction of user inputYpu can use the NumericTextBox settings which enable you to control the user input such as restricting the length of the fraction, setting value ranges, and more.
  • FormatsThe NumericTextBox provides formatting options for its input value and supports all date and number formats provided by the Kendo UI Internationalization package.
  • Predefined stepsYou can use the configuration options of the NumericTextBox to define the step which the component uses to increase or decrease its value.
  • Forms supportYou can use the NumericTextBox both in template-driven and reactive Angular forms.
  • Spin buttonsThe NumericTextBox enables you control its spin buttons which allow users to increase or decrease the value with a predefined step.
  • Disabled NumericTextBoxYou can use the configuration options of the NumericTextBox to disable the component so that users are not able to interact with it.
  • Read-only NumericTextBoxThe NumericTextBox provides an option for overriding its default active state.
  • Debouncing value changesAll Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • AppearanceAll Kendo UI for Angular Inputs enable you to set their dimensions.
  • GlobalizationAll Kendo UI for Angular Inputs provide globalization options.
  • AccessibilityThe NumericTextBox is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe NumericTextBox supports a number of keyboard shortcuts for processing various commands.

Known Limitations

To keep its value, the NumericTextBox uses the Number JavaScript object. The Number JavaScript object persists its precision up to 16 digits, and units which are longer than that get converted to exponential numbers and lose their precision. Because the component relies on Number, it inherits the precision limitation and because the limitation is caused by the JavaScript logic, the NumericTextBox does not provide a workaround to handle it.

In this article

Not finding the help you need?