KendoReact NumericTextBox Overview
The KendoReact NumericTextBox lets the user edit and submit specific numeric values by typing or by using the spin buttons.
The KendoReact NumericTextBox component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs package.
This is a Free React NumericTextBoxThe KendoReact NumericTextBox is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.The following example demonstrates the NumericTextBox in action.
The NumericTextBox is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the NumericTextBox and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.
Key Features
- Predefined steps—The predefined steps allow you to control the value of the increase or decrease step and fine-tune it for the specific application.
- Spin buttons—The NumericTextBox allows users to increase or decrease the input value with a predefined step by using the keyboard or the built-in buttons.
- Formats—You can control the format of the NumericTextBox input.
- Floating labels—The floating labels functionality is integrated into the KendoReact NumericTextBox and can be easily configured through the
labelproperty. - Forms support—You can integrate the NumericTextBox with an HTML5 form, a KendoReact Form, or a third-party React form library.
- Globalization—The KendoReact NumericTextBox comes with globalization features that allow you to create applications that can be used all over the world.
- Keyboard navigation—The NumericTextBox allows users to interact with the component by using the up and down arrows on the keyboard.
- Accessibility—The NumericTextBox is accessible for screen readers and provides full WAI-ARIA support.
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.
Known Limitations
To keep its value, the NumericTextBox uses the Number JavaScript object. The Number JavaScript object persists its precision up to 15 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.