Introducing the New Blazor OTP Input Component
Tags: blazor, whatsnew, ui, web
Published: 2024-07-08 16:03:47

---
title: Introducing the New Blazor OTP Input Component
published: true
date: 2024-07-03 10:00:00 UTC
tags: blazor, whatsnew, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/new-blazor-otp-input-component
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx2ychfxrkjbe30r6f3t.png
---
**TL;DR:** The new Syncfusion Blazor OTP Input component enhances app security with customizable OTP entry, making it ideal for authentication and transactions. Let’s explore its user-friendly features in detail!

We’re thrilled to introduce the new Syncfusion [Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input "Blazor OTP Input component") component as part of our [Essential Studio 2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release.

The [Blazor OTP Input](https://blazor.syncfusion.com/documentation/otp-input/getting-started "Getting started with Blazor OTP Input component") is a form component designed to streamline the process of entering one-time passwords (OTP) during multi-factor authentication. It offers extensive customization options, making it adaptable to various application needs. Features include configurable input types, adjustable input lengths, multiple styling modes, customizable placeholders and separators, and more.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Blazor-OTP-Input-component.png" alt="Blazor OTP Input component" style="width:100%">

  <figcaption>Blazor OTP Input component</figcaption>

</figure>

Let’s explore the new Blazor OTP Input component in detail!

## Use cases

The Blazor OTP Input component is well-suited for various apps:

- **User authentication**: Enhance login security by integrating OTP verification, ensuring only authorized users can access their accounts.
- **Secure transactions**: Include OTP input for confirming transactions in online banking or e-commerce platforms, adding a layer of security for sensitive financial activities.
- **Account verification**: To enhance security and prevent unauthorized access, use OTP Input to verify user identities during account creation, password recovery, and other account-related actions.

## Key features

The key features of the OTP Input component are as follows:

- [Built-in input types](#Built)
- [Adjustable input length](#Adjustable)
- [Multiple styling modes](#Multiple)
- [Customizable placeholder and separators](#Customizable)
- [Setting validation state](#Setting)
- [UI customization](#UI)

### <a name="Built">Built-in input types</a>

The Blazor OTP Input component supports three input types:

- [Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Number "Number input of Blazor OTP Input component"): The default input type, which restricts entries to digits only.
- [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Text "Text input of Blazor OTP Input component"): Allows alphanumeric and special character entries, suitable for more complex OTP requirements.
- [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Password "Password input of Blazor OTP Input component"): Similar to the text type but masks the input characters to ensure privacy.

In the following code example, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type "Type property of Blazor OTP Input component") property is used to define the input type, accepting values from the [OtpInputType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html "OtpInputType class of Blazor OTP Input component") enumeration.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<div class="otp-input-component">
    <div>
        <label>Number type</label>
        <SfOtpInput Value="1234"></SfOtpInput>
    </div>
    <div>
        <label>Text type</label>
        <SfOtpInput Type="OtpInputType.Text" Value="ab12"></SfOtpInput>
    </div>
    <div>
        <label>Password type</label>
        <SfOtpInput Type="OtpInputType.Password" Value="ab12"></SfOtpInput>
    </div>
</div>

<style>
    .otp-input-component {
        width: 250px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
</style>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Built-in-input-types-supported-in-Blazor-OTP-Input-component.png" alt="Built-in input types supported in Blazor OTP Input component" style="width:100%">

  <figcaption>Built-in input types supported in Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to the [input types of Blazor OTP Input component documentation](https://blazor.syncfusion.com/documentation/otp-input/input-types "Input Types in Blazor OTP Input component").

### <a name="Adjustable">Adjustable input length</a>

The Blazor OTP Input component offers flexibility to define the number of input fields, making it adaptable to various OTP length requirements. Whether you need a standard 6-digit OTP or a different length, the input length can be easily adjusted to meet your specific app requirements.

In the following example, the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length "Length property of Blazor OTP Input component") property is set to 8 to define the number of input fields.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<div class="otp-input-component" style="width: 400px;">
    <SfOtpInput Length=8 Value="12345678"></SfOtpInput>
</div>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Customizing-the-input-filed-length-in-the-Blazor-OTP-Input-component.png" alt="Customizing the input filed length in the Blazor OTP Input component" style="width:100%">

  <figcaption>Customizing the input filed length in the Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to [setting the input length of Blazor OTP Input component documentation](https://blazor.syncfusion.com/documentation/otp-input/appearance#setting-input-length "Setting the input length of Blazor OTP Input documentation").

### <a name="Multiple">Multiple styling modes</a>

Customize the appearance of the Blazor OTP Input component with various styling modes to suit your app’s visual design:

- [Outlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Outlined "Outlined property of Blazor OTP Input component"): Displays a border around each input field for a clear and structured look.
- [Filled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Filled "Filled property of Blazor OTP Input component"): Adds a background color to the input fields, enhancing visibility with an included underline.
- [Underlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Underlined "Underlined property of Blazor OTP Input component"): Highlights each input field with a sleek underline, providing a modern and minimalist style.

In the following code example, we set the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode "StylingMode property of Blazor OTP Input component") property to specify the desired styling mode using the [OtpInputStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html "OtpInputStyle class of Blazor OTP Input component") enumeration.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<input type="radio" checked="@(_inputStyle == OtpInputStyle.Outlined)"
       name="InputStyle" title="InputStyle:Outlined" @onchange="@(() => _inputStyle = OtpInputStyle.Outlined)" />
<label>Outlined</label>

<input type="radio" checked="@(_inputStyle == OtpInputStyle.Filled)"
       name="InputStyle" title="InputStyle:Filled" @onchange="@(() => _inputStyle = OtpInputStyle.Filled)" />
<label>Filled</label>

<input type="radio" checked="@(_inputStyle == OtpInputStyle.Underlined)"
       name="InputStyle" title="InputStyle:Underlined" @onchange="@(() => _inputStyle = OtpInputStyle.Underlined)" />
<label>Underlined</label>

<br />
<br />

<div class="otp-input-component" style="width: 400px;">
    <SfOtpInput StylingMode="@_inputStyle" Length=6 Value="123456"></SfOtpInput>
</div>

@code {
    private OtpInputStyle _inputStyle = OtpInputStyle.Outlined;
}
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Multiple-styling-modes-in-Blazor-OTP-Input-component.gif" alt="Multiple styling modes in Blazor OTP Input component" style="width:100%">

  <figcaption>Multiple styling modes in Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to the [styling modes in the Blazor OTP Input component documentation](https://blazor.syncfusion.com/documentation/otp-input/styling-modes "Styling Modes in Blazor OTP Input component").

### <a name="Customizable">Customizable placeholder and separators</a>

Enhance user guidance and visual clarity with customizable placeholders and separators in the Blazor OTP Input component.

- **Placeholders:** Display hint characters in each input field to indicate the expected value. Define a single character for all fields or customize each field based on its length.
- **Separators:** Specify a character to visually separate input fields tailored to improve the readability and structure of OTP inputs.

Refer to the following code example.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<div class="otp-input-component">
    <div>
        <label>Placeholders</label>
        <br /><br />
        <SfOtpInput Placeholder="#" Length="5"></SfOtpInput>
    </div>
    <div>
        <SfOtpInput Placeholder="#OTP#" Length="5"></SfOtpInput>
    </div>
    <div>
        <label>Separators</label>
        <br /><br />
        <SfOtpInput Separator="/" Length="6"></SfOtpInput>
    </div>
    <div>
        <SfOtpInput Separator="/" Length="6" CssClass="custom-otpinput"></SfOtpInput>
    </div>
</div>

<style>
    .otp-input-component {
        width: 275px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .custom-otpinput span.e-otp-separator:nth-of-type(odd) {
        display: none;
    }
</style>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Customizable-placeholder-and-separators-in-Blazor-OTP-Input-component.png" alt="Customizable placeholder and separators in Blazor OTP Input component" style="width:100%">

  <figcaption>Customizable placeholder and separators in Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to the [placeholders](https://blazor.syncfusion.com/documentation/otp-input/placeholder "Placeholder in Blazor OTP Input component") and [separators](https://blazor.syncfusion.com/documentation/otp-input/separator "Separator in Blazor OTP Input component") in the Blazor OTP Input component documentation.

### <a name="Setting">Setting validation state</a>

The Blazor OTP Input component enables you to set validation states, indicating success, warning, or error based on input validation. This component supports predefined styles that can be applied using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass "CssClass property of Blazor OTP Input component") property:

- **e-success**: Indicates a successful action.
- **e-error**: Indicates a negative action.
- **e-warning**: Indicates an action that requires caution.

In the following code example, the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass "CssClass property of Blazor OTP Input component") property is used to set the validation state using these e-classes.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<div class="otp-input-component">
    <div>
        <label>Success state</label>
        <SfOtpInput CssClass="e-success"></SfOtpInput>
    </div>
    <div>
        <label>Error state</label>
        <SfOtpInput CssClass="e-error"></SfOtpInput>
    </div>
    <div>
        <label>Warning state</label>
        <SfOtpInput CssClass="e-warning"></SfOtpInput>
    </div>
</div>

<style>
    .otp-input-component {
        width: 250px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
</style>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Validation-states-in-Blazor-OTP-Input-component.png" alt="Validation states in Blazor OTP Input component" style="width:100%">

  <figcaption>Validation states in Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to the [validation states](https://blazor.syncfusion.com/documentation/otp-input/appearance#cssclass "Validation States in the Blazor OTP Input component") in the Blazor OTP Input component documentation.

### <a name="UI">UI customization</a>

With the Blazor OTP Input component, you can easily customize its appearance, including rounded fields and styling for each field. It offers extensive flexibility and control over the OTP Input presentation, ensuring seamless integration into your app’s design.

The following code example demonstrates how to create a rounded OTP Input and customize the styling of each input field, handling both filled and empty states using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass "CssClass property of Blazor OTP Input component") property.

```xml
@rendermode InteractiveServer

@using Syncfusion.Blazor.Inputs

<div class="otp-input-component">
    <div>
        <label>Rounded OTP Input</label>
        <SfOtpInput CssClass="rounded-otp-input"></SfOtpInput>
    </div>
    <div>
        <label>Input field styling</label>
        <SfOtpInput CssClass="input-field-styles" Placeholder=" "></SfOtpInput>
    </div>
</div>

<style>
    .otp-input-component {
        width: 250px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .rounded-otp-input.e-otpinput .e-otp-input-field {
        border-radius: 50%;
        height: 50px;
        background-color: grey;
        color: white;
        font-size: 25px;
    }
    
    .rounded-otp-input.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus {
        border-radius: 50%;
    }
    
    .input-field-styles.e-otpinput .e-otp-input-field {
        height: 50px;
        background-color: lightgray;
        font-size: 25px;
        border-radius: 0;
        border-color: transparent;
    }

    .input-field-styles.e-otpinput .e-otp-input-field:not(:placeholder-shown) {
        background-color: #88d0e7;
        border-color: transparent;
    }

    .input-field-styles.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus {
        border-radius: 0;
        border-color: lightsalmon;
        border-width: 2px;
        box-shadow: none;
    }
</style>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Customizing-the-appearance-of-the-Blazor-OTP-Input-component.gif" alt="Customizing the appearance of the Blazor OTP Input component" style="width:100%">

  <figcaption>Customizing the appearance of the Blazor OTP Input component</figcaption>

</figure>

## References

For more details, refer to our [Blazor OTP Input component demos](https://blazor.syncfusion.com/demos/otp-input/default-functionalities?theme=fluent2 "Blazor OTP Input component demos") and [documentation](https://blazor.syncfusion.com/documentation/otp-input/getting-started "Blazor OTP Input component documentation").

## Supported platforms

The OTP Input component is also available on the following platforms. 
<table width="601">
<tbody>
<tr>
<td width="199">
<p><strong>Platform </strong></p>
</td>
<td width="200">
<p><strong>Live Demo </strong></p>
</td>
<td width="202">
<p><strong>Documentation </strong></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="JavaScript OTP Input Control" href="https://www.syncfusion.com/javascript-ui-controls/js-otp-input" target="_blank" rel="noopener">JavaScript</a></p>
</td>
<td width="200">
<p><a title="JavaScript OTP Input Demos" href="https://ej2.syncfusion.com/demos/#/material3/otp-input/default.html" target="_blank" rel="noopener">JavaScript OTP Input Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with JavaScript OTP Input" href="https://ej2.syncfusion.com/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with JavaScript OTP Input</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="Angular OTP Input Component" href="https://www.syncfusion.com/angular-components/angular-otp-input" target="_blank" rel="noopener">Angular</a></p>
</td>
<td width="200">
<p><a title="Angular OTP Input Demos" href="https://ej2.syncfusion.com/angular/demos/#/material3/otp-input/default" target="_blank" rel="noopener">Angular OTP Input Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with Angular OTP Input" href="https://ej2.syncfusion.com/angular/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with Angular OTP Input</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="React OTP Input Component" href="https://www.syncfusion.com/react-components/react-otp-input" target="_blank" rel="noopener">React</a></p>
</td>
<td width="200">
<p><a title="React OTP Input Demos" href="https://ej2.syncfusion.com/react/demos/#/material3/otp-input/default" target="_blank" rel="noopener">React OTP Input Demos</a></p>
</td>
<td width="202">
<p><a title="Getting Started with React OTP Input" href="https://ej2.syncfusion.com/react/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with React OTP Input</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="Vue OTP Input Component" href="https://www.syncfusion.com/vue-components/vue-otp-input" target="_blank" rel="noopener">Vue</a></p>
</td>
<td width="200">
<p><a title="Vue OTP Input Demos" href="https://ej2.syncfusion.com/vue/demos/#/material3/otp-input/default.html" target="_blank" rel="noopener">Vue OTP Input Demos</a></p>
</td>
<td width="202">
<p><a title="Getting Started with Vue OTP Input" href="https://ej2.syncfusion.com/vue/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with Vue OTP Input</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="ASP.NET Core OTP Input Control" href="https://www.syncfusion.com/aspnet-core-ui-controls/otp-input" target="_blank" rel="noopener">ASP.NET Core</a></p>
</td>
<td width="200">
<p><a title="ASP.NET Core OTP Input Demos" href="https://ej2.syncfusion.com/aspnetcore/otpinput/defaultfunctionalities#/material3" target="_blank" rel="noopener">ASP.NET Core OTP Input Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with ASP.NET Core OTP Input" href="https://ej2.syncfusion.com/aspnetcore/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with ASP.NET Core OTP Input</a></p>
</td>
</tr>
<tr>
<td width="199">
<p><a title="ASP.NET MVC OTP Input Control" href="https://www.syncfusion.com/aspnet-mvc-ui-controls/otp-input" target="_blank" rel="noopener">ASP.NET MVC</a></p>
</td>
<td width="200">
<p><a title="ASP.Net MVC OTP Input Demos" href="https://ej2.syncfusion.com/aspnetmvc/otpinput/defaultfunctionalities#/material3" target="_blank" rel="noopener">ASP.NET MVC OTP Input Demos </a></p>
</td>
<td width="202">
<p><a title="Getting Started with ASP.NET MVC OTP Input" href="https://ej2.syncfusion.com/aspnetmvc/documentation/otp-input/getting-started" target="_blank" rel="noopener">Getting Started with ASP.NET MVC OTP Input</a></p>
</td>
</tr>
</tbody>
</table>

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion [Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input "Blazor OTP Input") component that rolled out in our [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release. These features are also listed on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v26.1.35 "Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our [support forums](https://www.syncfusion.com/forums/ "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). Our team is always ready to assist you!

## Related blogs

- [What’s New in Blazor: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-volume-2 "Blog: What’s New in Blazor: 2024 Volume 2")
- [Introducing the New Blazor TextArea Component](https://www.syncfusion.com/blogs/post/new-blazor-textarea-component "Blog: Introducing the New Blazor TextArea Component")
- [Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/post/blazor-3d-charts-component "Blog: Introducing the New Blazor 3D Charts Component")
- [What’s New in Blazor Diagram: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2024-vol-2 "Blog: What’s New in Blazor Diagram: 2024 Volume 2")