New to Kendo UI for Angular? Start a free 30-day trial

Masks

The MaskedTextBox supports a set of built-in masks and also enables you to set your own custom mask rules and implement static symbols (literals) in the mask pattern.

Mask Rules

The MaskedTextBox supports the following built-in mask rules:

  • 0Requires a digit (0-9).
  • 9Requires a digit (0-9) or a space.
  • #Requires a digit (0-9), space, plus (+), or minus (-) sign.
  • LRequires a letter (a-Z).
  • ?Requires a letter (a-Z) or a space.
  • ARequires an alphanumeric (0-9, a-Z).
  • aRequires an alphanumeric (0-9, a-Z) or a space.
  • &Requires a character (excluding space).
  • CRequires a character or a space.
  • If any of the built-in masks accepts spaces, set the promptPlaceholder to a character that is not allowed by the mask.
  • To escape a mask rule, use the slash (\) character. An escaped rule turns into a literal.

The MaskedTextBox also allows you to define custom mask rules by setting the rules property.

Apart from the built-in and custom rules, you can also use static symbols in the mask pattern that are also known as literals. In the masked value, a literal is always rendered on the same position as the position where it is defined in the mask property.

The following example demonstrates how to use the digit-requiring mask (0) and the literal (-) of the MaskedTextBox.

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates how to extend the available mask rules.

Example
View Source
Edit In Stackblitz  
Change Theme:

Masks on Input Values or Focus

By default, the MaskedTextBox always renders a mask. To display the mask only when the input contains a value or is focused, use the maskOnFocus option. maskOnFocus is particularly useful in combination with floating labels.

Example
View Source
Edit In Stackblitz  
Change Theme: