Included UG for OtpInput

maui-toolkit-toc.html

@@ -289,6 +289,17 @@
             <li><a href="/maui-toolkit/NumericUpDown/Events">Events</a></li>
         </ul>
     </li>
+    <li>
+        SfOtpInput
+        <ul>
+            <li><a href="/maui-toolkit/Otp-Input/Overview">Overview</a></li>
+            <li><a href="/maui-toolkit/Otp-Input/Getting-Started">Getting Started</a></li>
+            <li><a href="/maui-toolkit/Otp-Input/Input-Types">Input Types</a></li>
+            <li><a href="/maui-toolkit/Otp-Input/Styling-Modes">Styling Modes</a></li>
+            <li><a href="/maui-toolkit/Otp-Input/OtpInput-Customization">Customization</a></li>
+            <li><a href="/maui-toolkit/Otp-Input/Events">Events</a></li>
+        </ul>
+    </li>
     <li>
         SfPolarChart
         <ul>

maui-toolkit/Otp-Input/Events.md

@@ -0,0 +1,37 @@
+---
+layout: post
+title: Events in .NET MAUI OtpInput control | Syncfusion®
+description: Learn about event support in Syncfusion® Toolkit for .NET MAUI OtpInput (SfOtpInput) control and more.
+platform: maui-toolkit
+control: OtpInput
+documentation: ug
+---
+
+# Event in .NET MAUI OtpInput (SfOtpInput)
+
+## ValueChanged event
+
+The OtpInput component triggers the `ValueChanged` event when the value of each OtpInput is changed. The `OtpInputValueChangedEventArgs` passed as an event argument provides the details of the each value is changed.
+
+{% tabs %}
+{% highlight xaml %}
+
+<otp:SfOtpInput ValueChanged="OnValueChanged"></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput();
+otpInput.ValueChanged += OnValueChanged;
+
+{% endhighlight %}
+{% endtabs %}
+
+{% highlight c# %}
+
+private void OnValueChanged(object sender, OtpInputValueChangedEventArgs e)
+{
+    // Codes that need to be executed once the input value is Changed.
+}
+
+{% endhighlight %}

maui-toolkit/Otp-Input/Getting-Started.md

@@ -0,0 +1,107 @@
+---
+layout: post
+title: Getting started with .NET MAUI OtpInput control | Syncfusion®
+description: Learn here about getting started with Syncfusion® .NET MAUI OtpInput (SfOtpInput) control in your cross-platform applications.
+platform: maui-toolkit
+control: OtpInput
+documentation: ug
+---
+
+# Getting Started with .NET MAUI OtpInput
+
+This section provides a quick overview of how to get started with the `OtpInput` for .NET MAUI and a walk-through to configure the .NET MAUI OtpInput in a real-time scenario. Follow the steps below to add .NET MAUI OtpInput to your project.
+
+## Prerequisites
+
+Before proceeding, ensure the following are set up:
+
+1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed.
+2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later) or Visual Studio Code. For Visual Studio Code users, ensure that the .NET MAUI workload is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code)
+
+## Step 1: Create a New MAUI Project
+
+{% tabcontents %}
+{% tabcontent Visual Studio %}
+
+1. Go to **File > New > Project** and choose the **.NET MAUI App** template.
+2. Name the project and choose a location. Then, click **Next.**
+3. Select the .NET framework version and click **Create.**
+
+{% endtabcontent %}
+{% tabcontent Visual Studio Code %}
+
+1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter.
+2. Choose the **.NET MAUI App** template.
+3. Select the project location, type the project name and press **Enter.**
+4. Then choose **Create project.**
+
+{% endtabcontent %}
+{% endtabcontents %}
+
+## Step 2: Install the Syncfusion<sup>®</sup> MAUI Toolkit Package
+
+{% tabcontents %}
+{% tabcontent Visual Studio %}
+
+1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.**
+2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version.
+3. Ensure the necessary dependencies are installed correctly, and the project is restored.
+
+{% endtabcontent %}
+{% tabcontent Visual Studio Code %}
+
+1. Press <kbd>Ctrl</kbd> + <kbd>`</kbd> (backtick) to open the integrated terminal in Visual Studio Code.
+2. Ensure you're in the project root directory where your .csproj file is located.
+3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion<sup>®</sup> .NET MAUI Toolkit NuGet package.
+4. To ensure all dependencies are installed, run `dotnet restore`.
+
+{% endtabcontent %}
+{% endtabcontents %}
+
+## Step 3: Register the handler
+
+In the MauiProgram.cs file, register the handler for Syncfusion<sup>®</sup> Toolkit.
+
+{% tabs %}
+{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %}
+using Syncfusion.Maui.Toolkit.Hosting;
+
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
+    {
+        var builder = MauiApp.CreateBuilder();
+        builder
+            .ConfigureSyncfusionToolkit()
+            .UseMauiApp<App>()
+            .ConfigureFonts(fonts =>
+            {
+                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+            });
+
+        return builder.Build();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %} 
+
+## Step 4: Add a Basic OtpInput
+
+1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code.
+
+2. Initialize `SfOtpInput`.
+
+{% tabs %}
+{% highlight xaml %}
+
+<otp:SfOtpInput></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput();
+
+{% endhighlight %}
+{% endtabs %}

maui-toolkit/Otp-Input/Input-Types.md

@@ -0,0 +1,97 @@
+---
+layout: post
+title: Input Types in .NET MAUI OtpInput | Syncfusion®
+description: Learn here about input types in Syncfusion® .NET MAUI OtpInput (SfOtpInput) control in your cross-platform applications.
+platform: maui-toolkit
+control: OtpInput
+documentation: ug
+---
+
+# Input Types in Blazor OTP Input component
+
+## Types
+
+This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases.
+
+### Number type
+
+You can set the `Type` property to `Number` to use this input type as number. This is ideal for OtpInput scenarios with numeric-only codes. By default `Type` property is `Number`.
+
+{% tabs %}	
+{% highlight xaml %}
+
+<otp:SfOtpInput Value="1234" Type="Number"></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput()
+{
+    Value = "1234",
+    Type = OtpInputType.Number
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+### Text type
+
+You can set the `Type` property to `Text` to use this input type as text. This is suitable when the OtpInput need to include both letters and numbers.
+
+{% tabs %}	
+{% highlight xaml %}
+
+<otp:SfOtpInput Value="e3c7" Type="Text"></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput()
+{
+    Value = "1234",
+    Type = OtpInputType.Text
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password type
+
+You can set the `Type` property to `Password` to use this input type as password in the OtpInput.
+
+{% tabs %}	
+{% highlight xaml %}
+
+<otp:SfOtpInput Value="e3c7" Type="Password"></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput()
+{
+    Value = "1234",
+    Type = OtpInputType.Password
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+## Value
+
+You can specify the value of OtpInput by using the `Value` property.
+
+{% tabs %}	
+{% highlight xaml %}
+
+<otp:SfOtpInput Value="e3c7"></otp:SfOtpInput>
+
+{% endhighlight %}
+{% highlight c# %}
+
+SfOtpInput otpInput = new SfOtpInput()
+{
+    Value = "1234"
+};
+
+{% endhighlight %}
+{% endtabs %}