background

KendoReact

React NumericTextBox

  • Enable users to edit and submit numeric values with this nimble text box component with built-in forms support.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
NumericTextBox Header
  • Enable Users to Input Numbers in Interactive Ways

    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 the 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 the 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 the 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 the React NumericTextBox Formats demo

    React NumericTextBox - Formats, KendoReact UI Library
  • Prefix and Suffix Adornments

    When working with the React NumericTextBox component, you can add prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area.

    See the React NumericTextBox Adornments demo

    NumericTextBox Prefix suffix icons
  • 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 the React NumericTextBox Forms Support demo

    React NumericTextBox - Forms Support, KendoReact UI Library
  • Prefix and Suffix Adornments

    Elevate user interactivity leveraging the option for adding prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area. Typical prefix adornments are currency symbols or unit indicators, while suffix adornments are often used for password visibility toggles, formatting or clearing the input. 

    See the React NumericTextBox Adornments demo

    Numerictextbox adornments
  • 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 the 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 the React NumericTextBox Accessibility demo

    Accessibility

All KendoReact Components

Next Steps