PatternMask
<MudTextField> can be configured to apply rules to the user input by setting
its Mask property.
The easiest to use Mask is the PatternMask which allows you to specify the input structure with
a simple pattern consisting of pre-defined mask characters.
In this example the mask string is "0000 0000 0000 0000" prompting for blocks of digits and
refusing invalid input. Note how the cursor automatically
jumps over delimiters so you don't have to type them. You can also try pasting the test credit card number 4543474002249996.
Expiration Date:
CVC:
<MudGrid Class="justify-space-between" Style="max-width: 400px;"> <MudItem xs="12"> <MudTextField Mask="@(new PatternMask("0000 0000 0000 0000"))" Label="Credit Card Number" @bind-Value="creditCard" Variant="@Variant.Text" Clearable /> </MudItem> <MudItem xs="4"> <MudTextField Mask="@(new DateMask("MM/YY", 'Y', 'M'))" Label="Expires" @bind-Value="expiration" Variant="@Variant.Text" /> </MudItem> <MudItem xs="4"/> <MudItem xs="4"> <MudTextField Mask="@(new PatternMask("000"))" Label="CVC" @bind-Value="cvc" Variant="@Variant.Text" /> </MudItem> <MudItem xs="12"> Credit Card Number: <b>@creditCard</b><br/> Expiration Date: <b>@expiration</b><br/> CVC: <b>@cvc</b> </MudItem> </MudGrid>
@code { private string creditCard; private string expiration; private string cvc; }
Defining Mask Characters
When you use PatternMask without setting its MaskChars property,
you can use the default masking characters a, 0 and *.
See their definitions below. But you are not limited to these. You can re-define them or define your own.
| Placeholder | Description | Regex |
|---|---|---|
a |
Letters, lower- and upper-case, both ASCII and Unicode | \p{L} |
0 |
Digits 0-9 | \d |
* |
Letters (Unicode) or digits | \p{L}|\d |
MaskChars. It also shows the features Placeholder
which makes the user aware of the input format and CleanDelimiters
which removes delimiters from the resulting Value. Last but not least the second
mask also transforms all lower-case input into upper-case. You can also try pasting dc12aa309c23 into the field.
<MudGrid Class="justify-space-between" Style="max-width: 800px;"> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="MAC Address" HelperText="@mask1.Mask" @bind-Value="mac1" Variant="@Variant.Text" Clearable /> </MudItem> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="MAC with Placeholder" HelperText="@mask2.Mask" @bind-Value="mac2" Variant="@Variant.Text" Clearable /> </MudItem> <MudItem xs="12" sm="6"> MAC Address: <b>@mac1</b> </MudItem> <MudItem xs="12" sm="6"> Cleaned MAC Address: <b>@mac2</b> </MudItem> </MudGrid>
@code { public string mac1, mac2; public PatternMask mask1 = new PatternMask("##:##:##:##:##:##") { MaskChars = new[] { new MaskChar('#', @"[0-9a-fA-F]") } }; public PatternMask mask2 = new PatternMask("XX-XX-XX-XX-XX-XX") { MaskChars = new[] { new MaskChar('X', @"[0-9a-fA-F]") }, Placeholder = '_', CleanDelimiters = true, Transformation = AllUpperCase }; // transform lower-case chars into upper-case chars private static char AllUpperCase(char c) => c.ToString().ToUpperInvariant()[0]; }
MultiMask
MultiMask is a powerful masking algorithm which can change its pattern depending on partial input.
It uses the same MaskChars as PatternMask. Check out the example code to see how easy it is to set up.
Example inspired by Cleave.js
<MudGrid Class="justify-space-between mb-3 mx-n3" Style="max-width: 800px;"> <MudItem xs="12"> <MudTextField Mask="" Label="Credit Card Number" Style="max-width: 400px;" @bind-Value="cardNumber" Variant="@Variant.Text" Clearable/> </MudItem> <MudItem xs="12"> Credit Card: <b>@cardNumber</b> </MudItem> </MudGrid>
@code { string cardNumber, cardType; MultiMask mask = new MultiMask("0000 0000 0000 0000", new MaskOption("American Express", "0000 000000 00000", @"^(34|37)"), new MaskOption("Diners Club", "0000 000000 0000", @"^(30[0-59])"), new MaskOption("JCB", "0000 0000 0000 0000", @"^(35|2131|1800)"), new MaskOption("VISA", "0000 0000 0000 0000", @"^4"), new MaskOption("MasterCard", "0000 0000 0000 0000", @"^(5[1-5]|2[2-7])"), new MaskOption("Discover", "0000 0000 0000 0000", @"^(6011|65|64[4-9])") ); MaskOption? option = null; Dictionary<string, Variant> variants = new(); MudElement element; protected override void OnInitialized() { base.OnInitialized(); mask.OptionDetected += (o, input) => { option = o; cardType = o == null ? "Unknown" : o.Value.Id; UpdateClasses(); // re-render only MudElement's children element.Refresh(); }; UpdateClasses(); } void UpdateClasses() { foreach (var type in new[] { "American Express", "Diners Club", "JCB", "VISA", "MasterCard", "Discover" }) variants[type] = type == cardType ? Variant.Filled : Variant.Outlined; } } @* Note: MudElement is used here to limit the render-update to this html tree *@ <MudElement HtmlTag="div" @ref="element" Style="max-width: 800px;" Class="mud-width-full"> <MudGrid Class="justify-space-between"> <MudItem xs="12" sm="6"> <MudAlert Variant="@variants["American Express"]" NoIcon Dense Class="mb-2"> American Express: starts with 34/37<br/> <pre>34·· ······ ·····</pre> </MudAlert> <MudAlert Variant="@variants["Diners Club"]" NoIcon Dense Class="mb-2"> Diners Club: starts with 300-305/309<br/> <pre>300· ······ ···</pre> </MudAlert> <MudAlert Variant="@variants["JCB"]" NoIcon Dense Class="mb-2"> JCB: starts with 35/2131/1800<br/> <pre>35·· ···· ···· ····</pre> </MudAlert> </MudItem> <MudItem xs="12" sm="6"> <MudAlert Variant="@variants["VISA"]" NoIcon Dense Class="mb-2"> VISA: starts with 4<br/> <pre>4··· ···· ···· ····</pre> </MudAlert> <MudAlert Variant="@variants["MasterCard"]" NoIcon Dense Class="mb-2"> MasterCard: starts with 51-55/22-27<br/> <pre>51·· ···· ···· ····</pre> </MudAlert> <MudAlert Variant="@variants["Discover"]" NoIcon Dense Class="mb-2"> Discover: starts with 6011/65/644-649<br/> <pre>6011 ···· ···· ····</pre> </MudAlert> </MudItem> </MudGrid> <MudText Class="mud-text-secondary" Typo="Typo.body2">Example inspired by Cleave.js</MudText> </MudElement>
DateMask
DateMask is an auto-correcting calendar-aware date input mask with customizable format. There are some restrictions though.
Day and month must be dual digit blocks like dd and MM. The year can either be denoted by
yy or by yyyy. The characters for the day, month and year blocks are customizable. You can align
the three blocks in any order and add any delimiters you want or none at all. The day block can be left out. Year and month blocks must be used or yields undefined
results as will multiple usage of a block.
@using System.Globalization <MudGrid Class="justify-space-between" Style="max-width: 800px;"> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="ISO Date" HelperText="@mask1.Mask" @bind-Value="isoDate" Variant="@Variant.Text" Clearable /> ISO: <b>@isoDate</b> </MudItem> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="US" HelperText="@mask2.Mask" @bind-Value="usDate" Variant="@Variant.Text" Clearable /> US: <b>@usDate</b> </MudItem> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="AT" HelperText="@mask3.Mask" @bind-Value="atDate" Variant="@Variant.Text" Clearable /> AT: <b>@atDate</b> </MudItem> <MudItem xs="12" sm="6"> <MudTextField Mask="" Label="Month" HelperText="@mask4.Mask" @bind-Value="monthAndYear" Variant="@Variant.Text" Clearable /> MM/YY: <b>@monthAndYear</b> </MudItem> </MudGrid>
@code { string isoDate, usDate, atDate; string monthAndYear; IMask mask1 = new DateMask("yyyy-MM-dd"); IMask mask2 = new DateMask("MM/dd/yyyy"); IMask mask3 = new DateMask("TT.MM.JJJJ", 'J', 'M', 'T'); IMask mask4 = new DateMask("MM/YY", 'Y', 'M'); }