How to customize the internal stroke colors in the .NET MAUI OTP Input (SfOtpInput)?

This article guides you through customizing the stroke colors of the OTP input field in various scenarios, including success, error, and warning states, to enhance user feedback and improve the overall experience.

XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:Syncfusion="clr-namespace:Syncfusion.Maui.Toolkit.OtpInput;assembly=Syncfusion.Maui.Toolkit"
            x:Class="OTPInputSample.MainPage">

   <StackLayout>
       <Label Text="Enter your OTP" FontSize="24" HorizontalOptions="Center" FontAttributes="Bold"/>
       <Syncfusion:SfOtpInput x:Name="OtpInput" Length="4" ValueChanged="OtpInput_ValueChanged" HorizontalOptions="Center" />
   </StackLayout>

</ContentPage>

C#:

private void OtpInput_ValueChanged(object sender, Syncfusion.Maui.Toolkit.OtpInput.OtpInputValueChangedEventArgs e)
{
   string enteredOtp = e.NewValue;

   if (string.IsNullOrEmpty(enteredOtp))
   {
       OtpInput.InputState = Syncfusion.Maui.Toolkit.OtpInput.OtpInputState.Default;
   }
   else if (enteredOtp.Length == OtpInput.Length)
   {
       if (enteredOtp == "1234")
       {
           OtpInput.InputState = Syncfusion.Maui.Toolkit.OtpInput.OtpInputState.Success;
       }
       else
       {
           OtpInput.InputState = Syncfusion.Maui.Toolkit.OtpInput.OtpInputState.Error;

       }
   }
   else
   {
       OtpInput.InputState = Syncfusion.Maui.Toolkit.OtpInput.OtpInputState.Warning;
   }
}

To customize the stroke color based on different states, such as success, error, or warning, define the predefined color keys inside the resource dictionary.

App.xaml

<Application .  .  .>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                . . .   
            </ResourceDictionary.MergedDictionaries>

            <Color x:Key="SfOtpInputDefaultStroke">Gray</Color>
            <Color x:Key="SfOtpInputSuccessStroke">#35B44A</Color>
            <Color x:Key="SfOtpInputErrorStroke">#D63D2C</Color>
            <Color x:Key="SfOtpInputWarningStroke">#FFF100</Color>

        </ResourceDictionary>
        
    </Application.Resources>
</Application>

Output:

You can download the complete sample from GitHub.

Conclusion

Hope you enjoyed learning how to apply stroke color to the .NET MAUI OTP Input.

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

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us by creating a support ticket. We are always happy to assist you!