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

• Text
• Numeric
• Regular Expression
• Date-Time
• Date-Time Offset
• Time Span

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

You can apply different size modes to the Masked Input. To specify component size in code, use the SizeMode property. To apply different size modes in this demo, use the drop-down list in the demo card's header.

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 combobox and Save Literals radio button specify the placeholder character and whether to save literals to the editor's value, respectively.

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 allow users to enter only date and/or time values using a specific format. Users can navigate between mask sections and increase or decrease section values with the Up/Down arrow keys and the mouse wheel.

The Masked Input component activates the date-time mask type once you bind the component's Value property to a DateTime object. To enable this mask type in other usage scenarios, set the component's MaskMode property to DateTime. Once set, assign a mask pattern to the Mask property to apply a mask and use the DxDateTimeMaskProperties component to customize mask appearance and behavior.

Use the settings available in this demo to explore different mask modes:

• Mask — Specifies the mask pattern.
• Caret Mode — Specifies whether to automatically move the caret to the next editable section once you complete input within a mask section (Advancing mode) or to move focus manually (Regular mode).
• Culture — Specifies the current culture. Culture can affect the appearance of a mask pattern.
• Cascading Section Updates — Specifies whether to increase or decrease the value of the previous or next mask section once you change a section's value with the Up/Down arrow key (or the mouse wheel) and the value passes the minimum or maximum threshold.

Like date-time masks, Date-time offset masks allow users to enter only date and/or time values using a specific format. Users can navigate between mask sections and increase or decrease section values with the Up/Down arrow keys and the mouse wheel. The difference is that date-time offset masks store time offsets from Coordinated Universal Time (UTC) and allow users to change offset values.

The Masked Input component activates the date-time offset mask type once you bind the component's Value property to a DateTimeOffset object. To enable this mask type in other usage scenarios, set the component's MaskMode property to DateTimeOffset. Once set, assign a mask pattern to the Mask property to apply a mask and use the DxDateTimeOffsetMaskProperties component to customize mask appearance and behavior.

Use the settings available in this demo to explore different mask modes:

• Mask — Specifies the mask pattern.
• Caret Mode — Specifies whether to automatically move the caret to the next editable section once you complete input within a mask section (Advancing mode) or to move focus manually (Regular mode).
• Culture — Specifies the current culture. Culture can affect the appearance of a mask pattern.
• Cascading Section Updates — Specifies whether to increase or decrease the value of the previous or next mask section once you change a section's value with the Up/Down arrow key (or the mouse wheel) and the value passes the minimum or maximum threshold.

Our Blazor Time span masks allow users to enter only time intervals. Users can navigate between mask sections and increase/decrease section values using the Up/Down arrow keys and the mouse wheel.

The Masked Input component activates the time span mask type once you bind the component's Value property to a TimeSpan object. To enable this mask type in other usage scenarios, set the component's MaskMode property to TimeSpan. Once set, assign a mask pattern to the Mask property to apply a mask, and use the DxTimeSpanMaskProperties component to customize mask appearance and behavior.

Use the settings available in this demo to explore different mask modes:

• Mask — Specifies the mask pattern.
• Caret Mode — Specifies whether to automatically move the caret to the next editable section once you complete input within a mask section (Advancing mode) or to move focus manually (Regular mode).
• Cascading Section Updates — Specifies whether to increase or decrease the value of the previous or next mask section once you change a section's value with the Up/Down arrow key (or the mouse wheel) and the value passes the minimum or maximum threshold.

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.

You can bind the editor's Value property to a field. If a user changes the input value, the editor updates its Value property. Use the BindValueMode property to specify when the update should happen. The following modes are available:

• OnLostFocus (default) — The editor value is updated after the editor loses focus.
• OnInput — The editor value is updated whenever a user types.
• OnDelayedInput — The editor value is updated with a delay after a user makes changes.

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.

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.