How to restrict number of input in Masked Edit field using .NET MAUI TextInputLayout?

This section illustrates how to restrict the number of inputs in a masked edit field using the .NET MAUI TextInputLayout along with the .NET MAUI MaskedEntry control. Follow these steps to achieve this functionality.

Step 1: XAML Markup
Initialize the TextInputlayout control and place the MaskedEntry control within it. Configure the MaskType property of the SfMaskedEntry to RegEx to enable regular expression-based masking.

XAML:

<StackLayout VerticalOptions="Center">
    <inputLayout:SfTextInputLayout x:Name="inputLayout" Hint="Enter credit card number" WidthRequest="350" CharMaxLength="12">
        <maskedEdit:SfMaskedEntry MaskType="RegEx" Mask="{Binding MaskChar}" Keyboard="Numeric">
        </maskedEdit:SfMaskedEntry>
    </inputLayout:SfTextInputLayout>
</StackLayout>

Step 2: Add code in C#
Define the MaskChar property, which is bound to the Mask property of the MaskedEntry in XAML. Use a regular expression to restrict the input to a numeric pattern with a maximum length, as defined by the CharMaxLength property of the TextInputLayout.

C#:

public partial class MainPage : ContentPage
{
    private string maskChar;
    public string MaskChar 
    {
        get { return maskChar; }
        set { maskChar = value; OnPropertyChanged("MaskChar");}
    }
    public MainPage()
    {
    	InitializeComponent();
        BindingContext = this;
        MaskChar = @"\d{0," + this.inputLayout.CharMaxLength + "}";
    }
}

Output

Conclusion
I hope you enjoyed learning how to restrict the number of inputs in a Masked Edit inside the TextInputLayout in .NET MAUI.

You can refer to our .NET MAUI TextInputLayout feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI TextInputLayout documentation to understand how to present and manipulate data.

Check out our .NET MAUI components from the License and downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI TextInputLayout and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!