How to customize the border and labels in .NET MAUI TextInputLayout?

This section explains how to customize the color of the border and labels within the .NET MAUI TextInputLayout control. By following the outlined steps, you can achieve a tailored appearance for the input layout to align with your design preferences.

Step 1: Create a ResourceDictionary for Styles
Define a ResourceDictionary to hold the custom styles for the TextInputLayout control. Within the ResourceDictionary, create a Style and set its TargetType to TextInputLayout. Inside the Style, configure the TextColor and FontSize properties for the HintLabelStyle, HelperLabelStyle, and ErrorLabelStyle.

XAML

<ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="inputLayout:SfTextInputLayout" x:Key="inputStyle">
                <Setter Property="HintLabelStyle">
                  <inputLayout:LabelStyle TextColor="Blue" FontSize="15"/>
                </Setter>
                <Setter Property="HelperLabelStyle">
                 <inputLayout:LabelStyle TextColor="Green" FontSize="13"/>
                </Setter>
                <Setter Property="ErrorLabelStyle">
                 <inputLayout:LabelStyle TextColor="Black" FontSize="20"/>  
                </Setter>            
            </Style>
        </ResourceDictionary>
 </ContentPage.Resources>

Step 2: Apply the Styled TextInputLayout
In your layout, apply the created style to the SfTextInputLayout control by setting the Style property. Also, customize the appearance further by adjusting the ContainerType, Stoke, Hint, and HelperText properties of TextInputLayout.

  <StackLayout VerticalOptions="Center">
        <inputLayout:SfTextInputLayout Style="{x:StaticResource inputStyle }"
                                       ContainerType="Outlined"
                                       HelperText="Enter password"
                                       WidthRequest="200" 
                                       Stroke="Red"
                                       ShowLeadingView="True"         
                                       TrailingViewPosition="Inside"            
                                       Hint="Password">
            <Entry Text="John"/>
        </inputLayout:SfTextInputLayout>
    </StackLayout>

Output

Conclusion
I hope you enjoyed learning how to Customize the border and labels in .NET MAUI TextInputLayout.

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

For current customers, check out our .NET MAUI components from the License and downloads page. 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 following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!