Blazor MaskedTextbox Overview
The Blazor Masked Textbox component provides a mask and prompts the user to enter the data in the required format, and it prevents input that does not match the mask. You can use it to show the user the format the need to write things like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values and so on.
You can also add a custom CSS class or control various attributes of the input element such as the name, placeholder, tabindex, and more, and also respond to events.
The MaskedTextBox component is part of Telerik UI for Blazor, a
professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basics
To use a Telerik MaskedTextbox for Blazor:
- Add the
<TelerikMaskedTextBox>tag. - Set its
Valueto thestringyou want to get out of it. - Provide the desired
Maskto prompt the user.
Basic masked textbox with two-way value binding and a credit card mask
@TheValue
<br />
<TelerikMaskedTextBox Mask="0000-0000-0000-0000"
@bind-Value="@TheValue">
</TelerikMaskedTextBox>
@code{
string TheValue { get; set; }
}
The result from the code snippet above before you start writing
Features
The Masked Textbox provides the following features:
Class- the CSS class that will be rendered on the wrapping element of the component.DebounceDelay-int- Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms.Enabled- whether theinputis enabled.Id- renders as theidattribute on the<input />element, so you can attach a<label for="">to the input.IncludeLiterals(defaults tofalse) - whether the literal characters from the mask (those characters that don't carry a special meaning such as brackets or dashes) are included in theValue. Read more in the Mask and Prompt article.Mask- the mask (pattern) that the user has to follow. Shown by default. Read more about its features in the Mask and Prompt article.MaskOnFocus(defaults tofalse) - whether the mask will be shown to the user only while the input is focused. When set totrue, the user will see the FloatingLabel (if used) orPlaceholder(if present) instead of the mask in case the textbox is empty. When there is some value in the input, the mask and input will be shown.Name- thenameattribute of the HTML element.PlaceHolder- astringthat maps to theplaceholderattribute of the HTML element. If a FloatingLabel is used, it will be shown instead of the placeholder when the input is not focused. See also theMaskOnFocusparameter.Prompt- (char) - the prompt character the user will see in the mask where there is no user value already. Defaults to an underscore_. Read more in the Mask and Prompt article.PromptPlaceholder(char?) - the character that is added to the rawValuefor places where there is no user input yet. Defaults to an empty spaceso the string length matches the mask length. Read more in the Mask and Prompt article.TabIndex- maps to thetabindexattribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with theTabkey.Title- maps to thetitleattribute of the HTML element. You can use it to add a tooltip.Validation - see the Input Validation article.
ValidateOn- configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs.Value- get/set the value of the input, can be used for binding.Width- the width of theinput. See the Dimensions article.
Some Sample Masks
The examples below demonstrates how to create a few masks for commonly used input types:
phone - Utilizes literals (the brackets and the plus sign for the country code; and dashes for readability) and rules for numbers.
credit card - Utilizes rules for the numbers and literals for the dashes.
SSN - Same as credit card.
UK post code - Uses rules for letters and numbers.
ZIP code - Uses rules for numbers.
ZIP+4 code - Riteral for the dash between the rules for numbers.
percentage - Rules for numbers with a literal for the decimal separator taken from the current culture and a literal for the percentage sign. The example also shows how you can parse that to a
doublevalue.customized mask - An example of mixing literals and rules to require an invoice number that has a certain portion of symbols that are not up to the user. Also shows how to escape characters that are rules so they act like literals.
Phone, credit card, SSN, UK post code, ZIP code, ZIP+4 code masks
@* type in the inputs to see the result. Depending on what you want to get, you may want to set IncludeLiterals=tru like for the percentage example at the end *@
<div style="white-space:pre;">
@Phone
@CardNumber
@SSN
@ZipCode
@ZipPlus4Code
</div>
<TelerikMaskedTextBox Mask="(+999) 000-0000" @bind-Value="@Phone"></TelerikMaskedTextBox><br />
<TelerikMaskedTextBox Mask="0000-0000-0000-0000" @bind-Value="@CardNumber"></TelerikMaskedTextBox><br />
<TelerikMaskedTextBox Mask="000-00-0000" @bind-Value="@SSN"></TelerikMaskedTextBox><br />
<TelerikMaskedTextBox Mask="L0L 0LL" @bind-Value="@UkPostcode"></TelerikMaskedTextBox><br />
<TelerikMaskedTextBox Mask="00000" @bind-Value="@ZipCode"></TelerikMaskedTextBox><br />
<TelerikMaskedTextBox Mask="00000-0000" @bind-Value="@ZipPlus4Code"></TelerikMaskedTextBox><br />
@code{
string Phone { get; set; }
string CardNumber { get; set; }
string SSN { get; set; }
string UkPostcode { get; set; }
string ZipCode { get; set; }
string ZipPlus4Code { get; set; }
}
One way to get percentage input and values
@* See the method that parses the string into the desired numerical value - you can customize that as needed by your app *@
<div style="white-space:pre;">
@RawPercentage
@ActualPercentage
</div>
<TelerikMaskedTextBox Mask="@PercentageMask"
IncludeLiterals="true"
PromptPlaceholder="null"
@bind-Value="@RawPercentage">
</TelerikMaskedTextBox>
@code{
string PercentageMask { get; set; } = $"00{System.Globalization.CultureInfo.CurrentCulture.NumberFormat.NumberDecimalSeparator}00%";
string RawPercentage { get; set; }
double? ActualPercentage => ParsePercentage();
//note: this parses the value exactly and will result in numbers that can be between 0 and 100
//and not like .NET usually treats percents as a value between 0 and 1
//you can implement any preferred logic
double? ParsePercentage()
{
if (string.IsNullOrEmpty(RawPercentage))
{
return null;
}
string trimmedValue = RawPercentage?.Replace("%", "").Replace(" ", "");
double result;
if(double.TryParse(trimmedValue, out result))
{
return result;
}
return null;
}
}
Custom mask that presets literals for the user
@* This example requires an invoice number that starts with a letter, has a second character that is a letter or a number, then a dash, then has the numbers "900" and four more numbers. For example A4-900123 *@
@invoiceNumber
<TelerikMaskedTextBox Mask="LA-\9\0\00000" @bind-Value="@invoiceNumber" IncludeLiterals="true"></TelerikMaskedTextBox>
@code{
string invoiceNumber { get; set; }
}