Blazor UI Components - Masked Input (available in v21.1)

ASP.NET Team Blog
07 June 2021

Our most recent release (v21.1) includes a new Masked Input data editor. As you might expect, this new Blazor UI element allows you to control data input and force users to enter data values that conform to specific standards. Our Masked Input supports the following mask types.

Text Mask

The text mask type allows users to enter alphabetic, numeric, or alphanumeric characters at specific positions. This mask can be used for things such as phone numbers, zip codes, and social security numbers.

You can use a DxTextMaskProperties component inside the Masked Input's markup to specify additional settings for this mask type:

  • Placeholder - The character used as a placeholder in a masked editor.
  • SaveLiteral - Specified whether Masked Input should include literals for an editor’s value.
<DxMaskedInput @bind-Value="@Phone" Mask="(999)000-0000">
  <DxTextMaskProperties Placeholder="@('\*')" SaveLiterals=false />
</DxMaskedInput>

Numeric Mask

The Numeric Mask mask type allows users to enter numeric values (integers, float, currency, percentage, etc.). This mask type supports the standard numeric .NET format.

<DxMaskedInput @bind-Value="@Price" Mask="C" />

Date Time Mask

The Date Time Mask type allows users to enter a date and/or time values using the standard .NET date and time format. You can use DxDateTimeMaskProperties to define caret behavior via the CaretMode property:

<DxMaskedInput @bind-Value="@Date" Mask="d">
  <DxDateTimeMaskProperties CaretMode="MaskCaretMode.Advanced" />
</DxMaskedInput>

Regular Expression and Custom Mask

Regular Expression and Custom Mask types allow you to specify a custom text pattern. The syntax is similar to the POSIX ERE specification.

Use DxRegExMaskProperties component to specify the following settings:

  • MaskAutoCompleteMode - Autocompletion mode used by the editor.
  • Placeholder - The character used as the placeholder in a masked editor.
  • PlaceholdersVisible - Specifies whether the editor should show/hide placeholders in a masked editor.
<DxMaskedInput @bind-Value="@Email" MaskMode="MaskMode.RegEx"
 Mask="(\w|[.-])+@(\w|-)+\.(\w|-){2,4}">
  <DxRegExMaskProperties PlaceholdersVisible=false />
</DxMaskedInput>

Note: You can use the Culture to specify culture settings used by masks. This property is applied for all mask types.

<DxMaskedInput @bind-Value="@Price" Mask="C">
  <DxNumericMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")" />
</DxMaskedInput>

Additionally, like other DevExpress Blazor Data Editors, Masked Input ships with the following core functionality:

  • Display format - Use the DisplayFormat property to format the display value when the editor is not focused.
  • Prompt text - Use the NullText property to specify the text editor’s placeholder text when the editor’s value is null.
  • Clear button - Use the ClearButtonDisplayMode property to display a Clear button with the control (Clear removes all content within the Masked Input).
  • Read-only and disabled modes.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
Gerhard Achrainer
Gerhard Achrainer

Hi Harry,

good improvement, we'll use that for sure.


You have set a wrong mask for e-mails - domain names can be way longer nowadays ;-)


Best regards from Austria!

7 June 2021
Dennis (DevExpress)
Dennis (DevExpress)

Anticipating a question from XAF's Blazor UI customers, you can implement a custom Property Editor based on DxMaskedInput as described in How to: Implement a Property Editor Based on a Custom Component (Blazor). In the meantime, it is also possible to limit user input with XAF's validation rules.

We'll also be happy to make a working sample based on your business requirements for v21.1. Please clarify what use-case scenarios you are interested in (for instance, enter an email or web address) using the DevExpress Support Center. Thank you in advance.

8 June 2021
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Gerhard,

Good news, for the scenario you described, there is a simple workaround. You can increase the last domain name length, changing the last digit in the following email regex:
(\w|[.-])+@(\w|-)+\.(\w|-){2,4}

To 5

(\w|[.-])+@(\w|-)+\.(\w|-){2,5}

Or any other required value. 

I'm including your helpful suggestion to use this regex for email domains (which may help others too):

 (\w|[.-])+@(\w|-)+\.(\w|-){2,63}

We'll update our Blazor Mask demo too. Thanks for the feedback.

9 June 2021

Please login or register to post comments.