Kendo UI for Angular MaskedTextBox Overview

The Kendo UI for Angular MaskedTextBox enables you to control the user input by using a mask.

The MaskedTextBox Component is part of Kendo UI for Angular, a professional grade UI library with 110+ 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 MaskedTextBox in action.

View Source
Change Theme:

Key Features

  • Masks—You can use the predefined mask rules of the MaskedTextBox to require a specific type of user input such as digits, spaces, letters, and more.
  • Validation—The MaskedTextBox delivers a built-in mask validator which ensures that the user input is valid.
  • Forms support—You can use the MaskedTextBox both in template-driven and reactive Angular forms.
  • Value—The MaskedTextBox provides settings for formatting its visible (masked) value.
  • Disabled MaskedTextBox—You can use the configuration options of the MaskedTextBox to disable the component so that users are not able to interact with it.
  • Read-only MaskedTextBox—The MaskedTextBox provides an option for overriding its default active state.
  • Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • Appearance—All Kendo UI for Angular Inputs enable you to set their dimensions.
  • Globalization—All Kendo UI for Angular Inputs provide globalization options.
  • Accessibility—The MaskedTextBox is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The MaskedTextBox supports a number of keyboard shortcuts for processing various commands.

To learn more about the appearance, anatomy, and accessibility of the MaskedTextBox, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Support and Learning Resources

Additional Resources