Getting Started with Blazor OTP Input component

4 Nov 20254 minutes to read

This guide explains how to add theBlazor OTP Input component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio

Create aBlazor WebAssembly App using Visual Studio viaMicrosoft Templates or theSyncfusion^® Blazor Extension.

Install Syncfusion^® Blazor Inputs and Themes NuGet in the App

To addBlazor OTP Input component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and installSyncfusion.Blazor.Inputs andSyncfusion.Blazor.Themes. Alternatively, you can use the following Package Manager commands.

Package Manager

Install-PackageSyncfusion.Blazor.Inputs-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

NOTE
Syncfusion^® Blazor components are available onnuget.org. Refer to theNuGet packages topic for the complete package list and component details.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio Code

Create aBlazor WebAssembly App using Visual Studio Code viaMicrosoft Templates or theSyncfusion^® Blazor Extension.

Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`).

Blazor WASM App

dotnetnewblazorwasm-oBlazorAppcdBlazorApp

Install Syncfusion^® Blazor Inputs and Themes NuGet in the App

PressCtrl+` to open the integrated terminal in Visual Studio Code.
Ensure the terminal is in the project root directory where the.csproj file is located.
Run the following commands to installSyncfusion.Blazor.Inputs andSyncfusion.Blazor.Themes, and restore dependencies.

Package Manager

dotnetaddpackageSyncfusion.Blazor.Inputs-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

NOTE
Syncfusion^® Blazor components are available onnuget.org. Refer to theNuGet packages topic for the complete package list and component details.

Register Syncfusion^® Blazor Service

Open~/_Imports.razor and import theSyncfusion.Blazor andSyncfusion.Blazor.Inputs namespaces.

~/_Imports.razor

@using Syncfusion.Blazor@using Syncfusion.Blazor.Inputs

Now, register the Syncfusion^® Blazor Service in the~/Program.cs file of your Blazor WebAssembly App.

~/Program.cs

usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of the~/index.html file.

<head>    ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>

NOTE
Refer to theBlazor Themes topic to discover available methods (Static Web Assets,CDN, andCRG) for referencing themes. SeeAdding Script Reference for approaches to adding script references. The script reference is required for component interactivity.

Add Syncfusion^® Blazor OTP Input component

Add the Syncfusion Blazor OTP Input component to the~/Pages/Index.razor file.

RAZOR

<SfOtpInput></SfOtpInput>

Help us improve this page

Correct inaccurate or outdated content