Overview

Text Mask:

Mask loading...

Numeric Mask:

Mask loading...

Date-Time Mask:

Mask loading...

Regular Expression Mask:

Mask loading...

The Masked Input component is a text editor that supports the following mask types:

  • Text
  • Numeric
  • Date-Time
  • Regular Expression

For more information on a specific mask type, refer to the corresponding section below.

The Masked Input component also allows you to enable client-side (WebAssembly) masks in Blazor Server applications. In this mode, the editor processes input text on the client to reduce input delays when you have a slow connection. For more information on how to activate the mode and its basic principles, refer to the following section: Optimize Mask Performance in Blazor Server Apps.

Demo card headers display drop-down lists on the right-hand side. Use these controls to apply different size modes to editors. To do the same in code, use the SizeMode property.

Text Masks

Mask loading...

Telephone:

You can use the Text mask type when you want to enter strings of limited length, such as phone numbers, zip codes, social security numbers, and so on. Some characters in the mask string serve as placeholders for digits or letters, while others are literals used to separate value sections.

Masked Input activates a text mask if you bind the component’s Value property to a string object. To enable this mask type in other cases, set the component’s MaskMode property to MaskMode.Text.

The Placeholder сombobox and Save Literals radio button specify the placeholder character and whether to save literals to the editor’s value, respectively.

Numeric Masks

Mask loading...

Price: 0

Use the Numeric mask type when you want to restrict input to numeric values. You can use predefined mask patterns or standard numeric .NET formats to specify the mask. Note that display values depend on the current culture. For example, the same input mask may define different settings for the U.S. and Germany ( currency symbol, thousand separator, precision, and so on).

Masked Input activates the numeric mask type if you bind the component’s Value property to a numeric object. To enable this mask type in other cases, set the component’s MaskMode property to MaskMode.Numeric.

The Mask combobox and Culture radio button specify the mask pattern and current culture, respectively.

Date-Time Masks

Mask loading...

Date: 6/15/2021 12:00:00 AM

The Date-Time mask type allows users to enter date and/or time values. You can use predefined mask patterns or standard date and time .NET formats to specify the mask. Note that display values depend on the current culture.

Masked Input activates the date-time mask type if you bind the component’s Value property to a DateTime object. To enable this mask type in other scenarios, set the MaskMode parameter to MaskMode.DateTime.

The Mask, Caret Mode, and Culture settings specify additional mask properties.

Regular Expression Masks

Mask loading...

Email :

If the mask types listed above do not meet your requirements, you can use the Regular Expression mask type. The syntax is similar to the POSIX ERE specification.

To apply this mask type to the Masked Input, set the component’s MaskMode property to MaskMode.RegEx.

The Autocomplete Mode, Placeholder, and Show Placeholders settings specify additional mask properties.

Bind Value On Input Change

Mask loading...

Price: 0

Set the BindValueMode property to BindValueMode.OnInput to update the Value property immediately in response to user input. You can compare this demo’s behavior to other modules. If this option is not enabled, the editor updates the Value property only when you move focus to another control.

Clear Button And Placeholder

Mask loading...

Set the ClearButtonDisplayMode property to Auto to display the Clear button in the Masked Input when it is not empty.

Use the NullText property to display placeholder text in the Masked Input when it is empty.

Display Format

Mask loading...

Use the DisplayFormat property to format the Masked Input’s display value when the editor is not focused.

Masked Input supports standard formats. See the Standard Numeric Format Strings and Custom Numeric Format Strings help topics for more information.

Read-Only and Disabled Modes

Mask loading...
Mask loading...

In this demo, the Masked Input displays values but does not allow users to change them. To implement this behavior, use any of the following modes:

  • Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
  • Disabled mode. In this mode, the component cannot receive input focus. Set the Enabled property to false to activate this mode.