MaskedTextBox

MaskedTextBoxes provide a specific predefined format or a mask rule for the expected user input.

Usage Guidelines

The Telerik and Kendo UI MaskedTextBox requires you to follow some basic principles when using the component.

Tolerance

The usage of a MaskedTextBox is always contextual, that is why it is important to set proper requirements. Different types of inputs require different combinations of special symbols, numbers, and letters. For example, credit and debit cards have hyphens between every four digits. However, it is not necessary to make the users insert those extra symbols.

A Telerik and Kendo UI MaskedTextBox allowing the user to type in only the digits, and not the hyphens, of the required Credit card input.
Spare users the time and effort to insert extra symbols if possible.
A Telerik and Kendo UI MaskedTextBox showing a hint for them to explicitly type in the hyphens between every four digits of their credit card number.
Avoid making users spend extra time and effort to аdd symbols that may distract them from the main information.

Text Label

Similarly to the NumericTextBox, the MaskedTextBox works with a predefined type of input and, therefore, requires you to clearly communicate its context. When included in a form, the MaskedTextBox is accompanied by a text label which clarifies its meaning and purpose. When integrated into complex components, for example, in the cells of a Grid, the MaskedTextBox does not require a label.

A Telerik and Kendo UI MaskedTextBox with a Zip code label introducing the required user input.
Use a text label to clarify the type of the required input.
A Telerik and Kendo UI MaskedTextBox with no label making it impossible to understand what type of information is required.
Avoid skipping the text label unless the MaskedTextBox is part of a complex component having its context already set.

Hint

If the required input type of the MaskedTextBox has some specific limitations, users must be aware of them so that they are able to meet the validation requirements.

A Telerik and Kendo UI MaskedTextBox with a hint sentence in red stating that the typed email address is not valid.
Clarify the restrictions for the MaskedTextBox input to help users meet its validation requirements.
A Telerik and Kendo UI MaskedTextBox not accepting the user email address input or showing what the required input type is.
Avoid leaving users at a loss as of why their input doesn't pass the validation requirements.
Feedback