Class SfOtpInput

The SfOtpInput control is used to enter and verify one-time passwords (OTP) easily and securely.

Inheritance

System.Object

SfView

SfOtpInput

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.Children

SfView.ClipToBounds

SfView.Padding

Namespace: Syncfusion.Maui.Toolkit.OtpInput

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfOtpInput : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IKeyboardListener, IParentThemeElement, IThemeElement

Constructors

SfOtpInput()

Initializes a new instance of the SfOtpInput class.

Declaration

public SfOtpInput()

Fields

AutoFocusProperty

Identifies the AutoFocus bindable property.

Declaration

public static readonly BindableProperty AutoFocusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

BoxHeightProperty

Identifies the BoxHeight bindable property.

Declaration

public static readonly BindableProperty BoxHeightProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

BoxWidthProperty

Identifies the BoxWidth bindable property.

Declaration

public static readonly BindableProperty BoxWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

InputBackgroundProperty

Identifies the InputBackground bindable property.

Declaration

public static readonly BindableProperty InputBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

InputStateProperty

Identifies the InputState bindable property.

Declaration

public static readonly BindableProperty InputStateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsEnabledProperty

Identifies the IsEnabled bindable property.

Declaration

public static readonly BindableProperty IsEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LengthProperty

Identifies the Length bindable property.

Declaration

public static readonly BindableProperty LengthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MaskCharacterProperty

Identifies the MaskCharacter bindable property.

Declaration

public static readonly BindableProperty MaskCharacterProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlaceholderColorProperty

Identifies the PlaceholderColor bindable property.

Declaration

public static readonly BindableProperty PlaceholderColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlaceholderProperty

Identifies the Placeholder bindable property.

Declaration

public static readonly BindableProperty PlaceholderProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SeparatorProperty

Identifies the Separator bindable property.

Declaration

public static readonly BindableProperty SeparatorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StylingModeProperty

Identifies the StylingMode bindable property.

Declaration

public static readonly BindableProperty StylingModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TextColorProperty

Identifies the TextColor bindable property.

Declaration

public static readonly BindableProperty TextColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ValueProperty

Identifies the Value bindable property.

Declaration

public static readonly BindableProperty ValueProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

AutoFocus

Gets or sets a value indicating whether the SfOtpInput field should automatically receive focus when the component is rendered.

Declaration

public bool AutoFocus { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the Boolean values and the default value is false.

Examples

Below is an example of how to configure the AutoFocus property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" AutoFocus="True" />

BoxHeight

Gets or sets a value that defines the height of each input field in the OTP input.

Declaration

public double BoxHeight { get; set; }

Property Value

Type
System.Double

Remarks

A double value representing the height of each input field. The default value is 40.

Examples

Below is an example of how to configure the BoxHeight property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" BoxHeight="50" />

BoxWidth

Gets or sets a value that defines the width of each input field in the OTP input.

Declaration

public double BoxWidth { get; set; }

Property Value

Type
System.Double

Remarks

A double value representing the width of each input field. The default value is 40.

Examples

Below is an example of how to configure the BoxWidth property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" BoxWidth="50" />

InputBackground

Gets or sets the background color for the OTP input fields.

Declaration

public Color InputBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	This property is applicable only when the StylingMode is set to the Filled state. A Microsoft.Maui.Graphics.Color that represents the background color.

Examples

Below is an example of how to configure the InputBackground property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" StylingMode="Filled" InputBackground="LightBlue" />

InputState

Gets or sets a value that can be used to customize the visual state of the SfOtpInput control.

Declaration

public OtpInputState InputState { get; set; }

Property Value

Type	Description
OtpInputState	It accepts the OtpInputState values, and the default value is Default.

Remarks

This property is useful for scenarios where sensitive information needs to be hidden from view, such as when entering a password or PIN.

Examples

Below is an example of how to configure the InputState property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" InputState="Success" />

IsEnabled

Gets or sets a value indicating whether to enable or disable the SfOtpInput control.

Declaration

public bool IsEnabled { get; set; }

Property Value

Type	Description
System.Boolean	It accepts Boolean values and the default value is true.

Examples

Below is an example of how to configure the IsEnabled property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" IsEnabled="False" />

Length

Gets or sets a value that can be used to specify the length of the input fields in SfOtpInput control.

Declaration

public double Length { get; set; }

Property Value

Type	Description
System.Double	It accepts double values and the default value is 4.

Examples

Below is an example of how to configure the Length property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Length="5" />

MaskCharacter

Gets or sets a character value that can be used to mask the OTP input values in password mode.

Declaration

public char MaskCharacter { get; set; }

Property Value

Type	Description
System.Char	It accepts the character values, and the default value is a dot ('●').

Examples

Below is an example of how to configure the MaskCharacter property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Type="Password" MaskCharacter="*" />

Placeholder

Gets or sets a value that can be used to shown as a hint/placeholder until the user focuses on or enters a value in SfOtpInput.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	It accepts string values.

Examples

Below is an example of how to configure the Placeholder property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Placeholder="X" />

PlaceholderColor

Gets or sets the color of the placeholder text displayed in the OTP input fields when they are empty.

Declaration

public Color PlaceholderColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color that represents the placeholder color.

Examples

Below is an example of how to configure the PlaceholderColor property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Placeholder="X" PlaceholderColor="Orange" />

Separator

Gets or sets a value that can be add a unique characters between the OTP input fields in SfOtpInput.

Declaration

public string Separator { get; set; }

Property Value

Type	Description
System.String	It accepts string values and the default value is an empty string.

Examples

Below is an example of how to configure the Separator property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Separator="|" />

Stroke

Gets or sets the color of the border stroke for the OTP input fields.

Declaration

public Color Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color that represents the stroke color.

Examples

Below is an example of how to configure the Stroke property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Stroke="Blue" />

StylingMode

Gets or sets a value that can be used to customize the OTP input fields in SfOtpInput.

Declaration

public OtpInputStyle StylingMode { get; set; }

Property Value

Type	Description
OtpInputStyle	A OtpInputStyle value. The default is Outlined.

Examples

Below is an example of how to configure the StylingMode property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" StylingMode="Filled" />

TextColor

Gets or sets the color used to display the text within the OTP input fields.

Declaration

public Color TextColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color that represents the text color.

Examples

Below is an example of how to configure the TextColor property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" TextColor="Green" />

Type

Gets or sets a value that can be used to specify the input values for the OTP input fields in SfOtpInput.

Declaration

public OtpInputType Type { get; set; }

Property Value

Type	Description
OtpInputType	It accepts the OtpInputType values and the default is Number.

Examples

Below is an example of how to configure the Type property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Type="Password" />

Value

Gets or sets a value for the OTP input in SfOtpInput control.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	It accepts string values.

Examples

Below is an example of how to configure the Value property using XAML and C#:

• XAML
• C#

<otpInput:SfOtpInput x:Name="otpInput" Value="1234"/>

Methods

ArrangeContent(Rect)

Arranges the layout and positions of OTP input fields and separators within the specified bounds, dynamically calculating positions to ensure proper alignment and spacing.

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

Syncfusion.Maui.Toolkit.SfView.ArrangeContent(Microsoft.Maui.Graphics.Rect)

DrawUI(ICanvas, RectF)

This method used to draw the rectangles.

Declaration

public void DrawUI(ICanvas canvas, RectF rectF)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas	The canvas on which the rectangles will be drawn.
Microsoft.Maui.Graphics.RectF	rectF	The bounds defining the size and position of the rectangles.

OnDraw(ICanvas, RectF)

Draws the OTP input UI on the canvas.

Declaration

protected override void OnDraw(ICanvas canvas, RectF dirtyRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas	The canvas to draw on.
Microsoft.Maui.Graphics.RectF	dirtyRect	The area that needs to be redrawn.

Overrides

Syncfusion.Maui.Toolkit.SfView.OnDraw(Microsoft.Maui.Graphics.ICanvas, Microsoft.Maui.Graphics.RectF)

Events

ValueChanged

Invoke the event when the value of SfOtpInput is changed.

Declaration

public event EventHandler<OtpInputValueChangedEventArgs> ValueChanged

Event Type

Type
System.EventHandler<OtpInputValueChangedEventArgs>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement