As a popular customer service sentiment goes: “The more pampered your customers are, the more they’ll love you!”
And that’s exactly what we aim for when developing applications—creating experiences that make users’ lives easier.
There are many scenarios where we can achieve this, but one of the most common is when users need to enter data in a specific format like a phone/account number, credit card or PIN.
And let’s be honest … How many times have we been frustrated by not knowing how to type those inputs correctly?
For example, imagine a user needing to enter their credit card number in the app. This number usually contains 16 digits (which is already quite a lot) and typically follows a format like 1234-5678-9012-3456. Now picture having to manually type in those dashes. it feels tedious, prone to mistakes and far from a smooth experience.
But everything changes when the app guides the user while typing—automatically formatting the number to match the expected credit card layout. This not only reduces the chance of errors but also makes the user feel more comfortable, more confident and more likely to see your app as an ally that makes their life easier.
These small details can make a big difference in the overall user experience. That’s why in this article, I’d love to walk you through the .NET MAUI MaskedEntry control from Progress Telerik UI for .NET MAUI, a tool that helps you guide users by enforcing input formats from the very first tap.
So, What Exactly Is the MaskedEntry Control?
.NET MAUI MaskedEntry is a control from Telerik UI for .NET MAUI that allows you to apply input formats and validate text fields, guiding users to enter data correctly from the start. This control is part of the 60+ professional UI components included in the Telerik UI for .NET MAUI library.
Real-World Usage Examples
Now let’s talk about some real-world examples where this kind of guided input truly makes a difference.
Credit Card and Account Numbers
Imagine you’re making a payment or a bank transfer from your app, and you reach the field where you need to enter a card or account number. It requires a long sequence of digits, typically grouped in blocks—like 16 digits for a credit card or 12 digits for an account number, usually separated by dashes.
But the input field is completely blank. It doesn’t show a format, it doesn’t guide you. You start typing quickly, like always, and end up with something like: 123456789012 or 1234567890123456.
Notice anything wrong? You’re missing the required dashes. Now you have to stop, go back and add the missing separators.
Now picture a better experience: The moment you start typing, the field guides you with the expected format. You don’t even have to type the dashes—they’re already there.
All you have to do is enter the numbers, and the MaskedEntry takes care of the rest.
That’s what a masked input does. It’s not just about restricting what the user can type—it’s about guiding them to the right format without making them overthink it.
PIN Codes
Picture this: You’re in an app trying to change your password. It asks you to enter a four-digit PIN to verify your identity. But the input field has no validation, no visual guidance.
What happens if you accidentally enter five digits instead of four? Or if you hit a letter without realizing it, even though the PIN should be numeric only? And you only notice the mistake after several failed attempts. That’s not just frustrating—it affects how secure your app feels.
Now imagine the opposite: The moment you tap the field, you immediately know it expects four numbers. A placeholder guides you, and the field won’t let you enter more or less than what’s required. It takes two seconds, and you’re done.
Now, Let’s Take a Look at What the MaskedEntry Control Looks Like
To help you understand it better, take a look at the example in the image. It includes several fields (like phone, IP and email), each with different validations based on what’s required.
Notice how each field has a specific format, allowing for a clearer, more guided and tailored input experience depending on the type of information being entered.
Setting Up the Environment for Implementation
Now that you’ve explored its benefits, it’s time to see how to use it in your own app. Don’t worry, getting started is super simple with the free trial from Progress Telerik. First, complete the following steps:
- Make sure your .NET MAUI app is set up
- Download Telerik UI for .NET MAUI
- Install the Telerik component into your project
After installing the Telerik component in your project, you’ll be fully equipped to start building your solution.
Step 1: Import the Telerik Namespace
Open your XAML file and add this line to include the Telerik controls:
xmlns:telerik="[http://schemas.telerik.com/2022/xaml/maui](http://schemas.telerik.com/2022/xaml/maui)"
Step 2: Register Telerik in MauiProgram.cs
Head over to your MauiProgram.cs file, and inside the CreateMauiApp method, don’t forget to add .UseTelerik() to register the library. Just make sure it goes before .UseMauiApp().
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
Step 3: Adding the Namespace
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
You’re all set to add the control! Now let’s move on to the next section, where I’ll show you an example of how to implement it for each mask type available in the control.
MaskedEntry Types
The MaskedEntry control allows you to define the type of input mask a field will use through the Mask property. This property can include both literal and special characters, depending on the type of input you need to configure.
In total, this control supports five mask types to cover different needs within your app:
Text
The text type validates general text input.
Progress Telerik offers a wide variety of mask options that let you control the type of input allowed—from digits and letters to optional characters and even symbols. You can check the reference list to see the full table of available options.
Let’s look at an example of a mask for a bank account number, where:
▪️ Each 0 represents a required digit in the format.
▪️ The hyphens (-) are fixed and cannot be moved or deleted—they always stay in the same position in the input format.
▪️ The result is a field that forces the user to enter a bank account number in the following format: 1234-5678-9012.
<telerik:RadTextMaskedEntry
x:Name="accountNumberEntry"
Mask="0000-0000-0000"
AutomationId="accountMask" />
Numeric
The numeric type verifires that only numeric values are entered (can be of type double or decimal).
You can set one of the Standard Numeric Format Specifiers.
Now, building on this same example, let’s see how to apply the percent mask.
<telerik:RadNumericMaskedEntry Mask="P" AutomationId="numericMaskP"/>
Now let’s look at another example—this time applying the Currency mask.
<telerik:RadNumericMaskedEntry Mask="C" AutomationId="numericMaskC"/>
Regex
The regex type is ideal for custom formats, as it validates that the user’s input—usually alphanumeric—matches a specific regular expression. It’s my favorite! ⭐ The value property is a string. Telerik allows you to use a variety of regular expressions to precisely define what can be entered in the field. (You can check the full list in the official documentation.)
Let’s try the following example, where the user is only allowed to enter letters and numbers—no spaces or special characters.
Here’s what this does:
▪️ The expression ^[a-zA-Z0-9]{6}$ means that exactly 6 alphanumeric characters are allowed.
▪️ If the user enters fewer or more characters, or includes any special symbols, the field will show an error.
<telerik:RadRegexMaskedEntry
x:Name="accountCodeEntry"
Mask="^[a-zA-Z0-9]{6}$"
Placeholder="Enter 6 alphanumeric characters"
AutomationId="regexMask" />
IP Address
The IP address type captures and validates IP addresses accurately. The value property is a string.
Let’s take a look at an example of how to do it!
<telerik:RadIPMaskedEntry AutomationId="ipMask"/>
The email type verifies that the user enters a valid email address. The Value property is a string.
Let’s take a look at an example of how to do it!
<telerik:RadEmailMaskedEntry AutomationId="emailMask"/>
Wrap-up
And that’s all! In just a few minutes, you’ve learned how to work with the Telerik MaskedEntry control and all the features it offers—including the different mask types you can use in your .NET MAUI applications.
I hope this was helpful, and that you’ll start integrating it into your apps from now on!
Remember, Telerik UI for .NET MAUI comes with a free 30-day trial, so go ahead:
Thanks for reading!
References
- https://www.telerik.com/maui-ui/maskedentry
- https://docs.telerik.com/devtools/maui/controls/maskedentry/overview
- https://docs.telerik.com/devtools/maui/controls/maskedentry/mask
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>
]]>