React NumericTextBox

Overview

The React NumericTextBox component lets users edit and submit only numeric values by typing in the component’s input area, or by using the provided spin buttons to change the value.

See React NumericTextBox Overview demo

React NumericTextBox - Overview, KendoReact UI Library

Predefined Steps

By default, the KendoReact NumericTextBox increases or decreases its numerical value by a step of one. This can easily be changed to any number by setting a single configuration option.

See React NumericTextBox Predefined Steps demo

React NumericTextBox - Predefined Steps, KendoReact UI Library

Spin Buttons

The KendoReact NumericTextBox features a set of spin buttons, allowing users to increase or decrease the numeric value by clicking on the provided up or down arrows. These are enabled by default, but can easily be disabled.

See React NumericTextBox Spin Buttons demo

React NumericTextBox - Spin Buttons, KendoReact UI Library

Formats

Being responsible for numeric values the KendoReact NumericTextBox may be showing decimals, percentages, currency or any mix of these. Thanks to the format property, the React NumericTextBox can immediately follow any restrictions based on the format provided.

See React NumericTextBox Formats demo

React NumericTextBox - Formats, KendoReact UI Library

Forms Support

The KendoReact NumericTextBox component can be added to any HTML form, be a part of a KendoReact Form, or be integrated with any other third-party React form library. The React NumericTextBox features styling and settings for displaying an invalid state and can work with custom validation messages.

See React NumericTextBox Forms Support demo

React NumericTextBox - Forms Support, KendoReact UI Library

Keyboard Navigation

By default, the KendoReact NumericTextBox component can be interacted with through keyboard navigation, using the up and down arrows to increase or decrease the component’s value.

See React NumericTextBox Keyboard Navigation demo

Accessibility

The KendoReact NumericTextBox is fully accessible and is compliant with Section 508 and WAI-ARIA standards, and has a AAA WCAG 2.0 rating.

See React NumericTextBox Accessibility demo

React NumericTextBox - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.