How to validate with required verification in .NET MAUI TextInputLayout (SfTextInputLayout)?

This article demonstrates how to validate user input with required verification using TextInputLayout. The .NET MAUI TextInputLayout control enhances user experience for capturing input. The example shows how to display an error message when a field is left empty.

Steps
1. Initialize the TextInputLayout Control

Add an Entry for user input inside the TextInputLayout. Attach a DataTrigger to the TextInputLayout’s Triggers collection to perform dynamic validation and show errors if fields (email and password) are empty.

2. Configure the DataTrigger

The DataTrigger checks the text length in the associated Entry. If zero (empty), the trigger modifies TextInputLayout properties to indicate an error. Set HasError to true and use ErrorText for relevant messages.

XAML

<StackLayout HorizontalOptions="CenterAndExpand" Margin="15">
    
    <inputLayout:SfTextInputLayout Hint="Email" 
                                   x:Name="emailField"                                       
                                   ContainerType="Outlined">
        <inputLayout:SfTextInputLayout.Triggers>
            <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                         Binding="{Binding Source={x:Reference emailentry}, Path=Text.Length}" 
                         Value="0">
                <Setter Property="HasError" Value="True"/>
                <Setter Property="ErrorText" Value="Email is empty"/>
            </DataTrigger>
        </inputLayout:SfTextInputLayout.Triggers>
        <Entry x:Name="emailentry" />
    </inputLayout:SfTextInputLayout>
    
    <inputLayout:SfTextInputLayout Hint="Password" 
                                   x:Name="passwordField"                                      
                                   ContainerType="Outlined">
        <inputLayout:SfTextInputLayout.Triggers>
            <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                         Binding="{Binding Source={x:Reference passwordentry}, Path=Text.Length}" 
                         Value="0">
                <Setter Property="HasError" Value="True"/>
                <Setter Property="ErrorText" Value="Password is empty"/>
            </DataTrigger>
        </inputLayout:SfTextInputLayout.Triggers>
        <Entry x:Name="passwordentry" />
    </inputLayout:SfTextInputLayout>
    
    <Button Text="Next" 
            BackgroundColor="Black"
            TextColor="White" 
            WidthRequest="100" 
            HorizontalOptions="Center"/>
</StackLayout>

Output

Conclusion
I hope you enjoyed learning how to validate with required verification in the .NET MAUI TextInputLayout.

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 oursupport forums, Direct - Trac, or feedback portal. We are always happy to assist you!