background

Kendo UI for Angular

Angular NumericTextBox

  • Allow users to input numbers in their Angular apps in interactive ways.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
The NumericTextBox component being used as a weight entry field
  • Input Numbers with Keyboard or Spinners

    The Kendo UI for Angular Numeric Text Box component is a form component dedicated exclusively to handling numeric values. Information can be inserted using the keyboard or manipulated using the UI spin buttons.

    See Angular NumericTextBox Overview demo.

    Kendo UI for Angular NumericTextBox - Overview
  • Read-Only NumericTextBox

    Set the Kendo UI for Angular NumericTextBox to read-only mode when you want to display information that users can see but cannot edit.

    See Angular NumericTextBox Read-Only demo.

    Kendo UI for Angular NumericTextBox - Read-Only
  • Predefined Steps

    The Kendo UI for Angular NumericTextBox can be configured to increase or decrease its numerical value by any predefined step. By default, the steps are increased by one, but with the predefined steps option, the number in the Angular NumericTextBox can be changed in increments of five, 10, or any other custom value.

    See Angular NumericTextBox Predefined Steps demo.

    Kendo UI for Angular NumericTextBox - Predefined Steps
  • Spin Buttons

    The Kendo UI for Angular NumericTextBox features a set of spin buttons on the side of the input field, which allow users to input numbers by clicking the up and down arrows. The spin buttons can be enabled or disabled through a single configuration option.

    See Angular NumericTextBox Spin Buttons demo.

    Kendo UI for Angular NumericTextBox - Spin Buttons
  • Formats

    Numeric values come in various formats, such as decimals, percentages, currency and more. The Kendo UI for Angular NumericTextBox can be passed a format string to ensure that the component displays numeric values in the proper format.

    See Angular NumericTextBox Formats demo.

    Kendo UI for Angular NumericTextBox - Formats
  • Forms Support

    The Kendo UI for Angular NumericTextBox can be added to any existing Angular form thanks to its support for Template-driven and Reactive forms.

    See Angular NumericTextBox Forms Support demo.

    Kendo UI for Angular NumericTextBox - Forms Support
  • 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 Angular NumericTextBox Adornments demo
     

    Numerictextbox adornments
  • Disabled NumericTextBox

    With a single configuration option, you can toggle between enabling and disabling the Kendo UI for Angular NumericTextBox. Disable the Angular NumericTextBox when you want to prevent users from interacting with the component.

    See Angular NumericTextBox Disabled demo.

     

    Kendo UI for Angular NumericTextBox - Disabled
  • Keyboard Navigation

    Thanks to the built-in keyboard navigation, the Kendo UI for Angular NumericTextBox allows user to change the component value solely with the keyboard arrow keys.

    See Angular NumericTextBox Keyboard Navigation demo.

  • Accessibility

    The Kendo UI for Angular NumericTextBox is fully accessible, complies with Section 508 and WAI-ARIA standards and has AAA WCAG 2.0 rating.

    See Angular NumericTextBox Accessibility demo.

    Accessibility

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka