React MaskedTextBox

Overview

A HTML input can be responsible for quite a wide range data. Beyond text there may be certain data types that need to be entered like zip codes, phone numbers and many more that each can be varied by different locales. Components like the KendoReact MaskedTextBox provide built-in masks to not only indicate to the user what kind of format is expected, but can also enforce this mask as the user is inserting data, then validate data when a form is submitted. The React MaskedTextBox provides built-in masks, but custom rules can be applied as well.

See React MaskedTextBox Overview demo

React MaskedTextBox - Overview, KendoReact UI Library

Masks

The KendoReact MaskedTextBox supports a set of built-in masks like requiring digits, letters or special symbols and characters. These can be combined to create any custom mask to adhere to any data format requirement.

See React MaskedTextBox Masks demo

React MaskedTextBox - Masks, KendoReact UI Library

Disabled MaskedTextBox

By default, the KendoReact MaskedTextBox will be enabled and can be interacted with, but certain requirements may call for users to be restricted from entering data. With a single property toggle, the MaskedTextBox can be disabled, preventing user input and visually indicating that the component is in a disable state.

See React MaskedTextBox Disabled demo

React MaskedTextBox - Disabled MaskedTextBox, KendoReact UI Library

Read Only MaskedTextBox

The KendoReact MaskedTextBox features the ability to enter read only mode, preventing the user from entering additional data, while still displaying the current information and allowing for selection of the text available in the React MaskedTextBox input.

See React MaskedTextBox Read Only demo

React MaskedTextBox - Read Only MaskedTextBox, KendoReact UI Library

Forms Support

The KendoReact MaskedTextBox can be added to any HTML form element, a KendoReact Form component, or integrated to any third-party React form library. That’s thanks to built-in styles and messaging around validation, as well as the ability to adhere to rules of any form.

See React MaskedTextBox Forms Support demo

React MaskedTextBox - Forms Support, KendoReact UI Library

Accessibility

One of the core aspects of KendoReact is compliance with various accessibility standards. The KendoReact MaskedTextBox is no exception and adheres to Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

See React MaskedTextBox Accessibility demo

React MaskedTextBox - 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.