KendoReact MaskedTextBox Overview

The KendoReact MaskedTextBox uses a mask to control the input of the user.

The KendoReact MaskedTextBox component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs package.


The following example demonstrates the MaskedTextBox in action.

Example
View Source
Change Theme:

The MaskedTextBox 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 MaskedTextBox and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.

Key Features

  • Disabled MaskedTextBox—You can render a disabled MaskedTextBox and keep it disabled until certain requirements are met.
  • Read-only MaskedTextBox—You can override the default active state of the MaskedTextBox.
  • Valid MaskedTextBox—The built-in validation allows you to ensure that the user provides valid information.
  • Value—The MaskedTextBox provides options for controlling its value.
  • Masks—You can take advantage of the built-in masks or define your custom rules.
  • Forms support—You can easily integrate the MaskedTextBox with an HTML5 form, a KendoReact Form, or a third-party React form library.
  • Globalization—The KendoReact MaskedTextBox comes with globalization features that allow you to create applications that can be used all over the world.
  • Accessibility—The MaskedTextBox is accessible for screen readers and provides full WAI-ARIA support.

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.

In this article

Not finding the help you need?