Input Mask / Custom Mask

Blazor Input Mask - Custom Mask Patterns

Loading Syncfusion Blazor Server Demos…

Properties

This example demonstrates the custom mask functionalities of the MaskedTextBox component. Enter time values in meridiem format and IP values in numeric format.

Custom Mask Configuration Methods:

Custom Characters:

You can form the mask with any non-mask elements (literals) and configure the behavior of those non-mask elements as mask elements through the CustomCharacters property.

In this demo, the "Time" mask '99 : 99 >PM' contains the literals P and M, which are configured to allow inputs as 'P', 'A', 'p', 'a', and 'M', 'm'.

Regular Expression:

Alternatively, you can use regular expressions as mask elements to validate the input of particular input places.

In the "IP address" example, each character is masked by a regular expression to allow a particular range of values.

See also

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE