Customization in .NET MAUI OTP Input (SfOtpInput)

30 Jul 20256 minutes to read

An OTP Input consists of multiple customizable elements to enhance its appearance and functionality.

Placeholder

The placeholder specifies the hint text that appears until the user enters a value

Use the Placeholder property to set this text. If a single character is assigned, each input field will display the same character.

<otpInput:SfOtpInput Placeholder="_" />
SfOtpInput otpInput = new SfOtpInput()
{
    Placeholder = "_"
};

Placeholder

For placeholders with multiple characters, available input fields will sequentially display each character.

<otpInput:SfOtpInput Placeholder="wxyz" />
SfOtpInput otpInput = new SfOtpInput()
{
    Placeholder = "wxyz"
};

Placeholder

Placeholder color

The color of placeholder text can be changed using the PlaceholderColor property.

<otpInput:SfOtpInput Placeholder="x" PlaceholderColor="Red" />
SfOtpInput otpInput = new SfOtpInput()
{
    Placeholder = "x",
    PlaceholderColor = Colors.Red
};

PlaceholderColor

Separator

The Separator property defines a character or symbol used to separate each input field, visually distinguishing inputs.

<otpInput:SfOtpInput Separator="/" />
SfOtpInput otpInput = new SfOtpInput()
{
    Separator = "/"
};

Separator

Setting input length

You can specify the number of input fields to match the desired OTP code length by using the Length property. The default value is 4.

<otpInput:SfOtpInput Length="6" />
SfOtpInput otpInput = new SfOtpInput()
{
    Length = 6
};

Input length

Input box size

You can specify the width and height of each input box by using the BoxWidth and BoxHeight properties. This customization allows you to tailor the OTP input appearance to match your application’s design. The default values are 40 for both width and height.

<otpInput:SfOtpInput BoxWidth="50" BoxHeight="50" />
SfOtpInput otpInput = new SfOtpInput() 
{ 
    BoxWidth = 50, 
    BoxHeight = 50 
};

Input background

The InputBackground property customizes the appearance of input fields. This property works when StylingMode is set to Filled.

<otpInput:SfOtpInput InputBackground="LightPink" StylingMode="Filled" />
SfOtpInput otpInput = new SfOtpInput()
{
    InputBackground = Colors.LightPink,
    StylingMode = OtpInputStyle.Filled
};

InputBackground

Stroke

You can set the Stroke property to any color to customize the border appearance of the input fields.

<otpInput:SfOtpInput Stroke="Blue" />
SfOtpInput otpInput = new SfOtpInput()
{
    Stroke = Colors.Blue
};

Stroke

Text color

You can set the TextColor property to any color to customize the text appearance of the input fields.

<otpInput:SfOtpInput TextColor="Orange" />
SfOtpInput otpInput = new SfOtpInput()
{
    TextColor = Colors.Orange
};

TextColor

Mask character

Set the MaskCharacter property to any character to define how the masked input is displayed, enhancing security by obscuring sensitive information. The MaskCharacter property applies only when Type is set to Password.

<otpInput:SfOtpInput Type="Password" MaskCharacter="#" />
SfOtpInput otpInput = new SfOtpInput()
{
    Type = OtpInputType.Password,
    MaskCharacter = '#'
};

MaskCharacter

Input state

The InputState property visually represent the validation status of the input fields.

Success

The InputState can be set to Success to indicate that the input is correct. When the InputState is set to Success, the stroke of the OTP Input turns green.

<otpInput:SfOtpInput InputState="Success" />
SfOtpInput otpInput = new SfOtpInput()
{
    InputState = OtpInputState.Success
};

Success state

Warning

The InputState can be set to Warning to indicate a potential issue with the input, prompting the user to correct it. The stroke of the OTP Input turns orange-brown when InputState is set to Warning.

<otpInput:SfOtpInput InputState="Warning" />
SfOtpInput otpInput = new SfOtpInput()
{
    InputState = OtpInputState.Warning
};

Warning state

Error

The InputState can be set to Error to indicate that the input is invalid or requires correction. The stroke of OTP Input turns red when InputState is set to Error.

<otpInput:SfOtpInput InputState="Error" />
SfOtpInput otpInput = new SfOtpInput()
{
    InputState = OtpInputState.Error
};

Error state