# OTP Input

Source: https://lumeo.nativ.sh/components/otp-input

# OTP Input

A one-time password input with auto-focus and auto-advance between fields.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<OtpInput />

## When to Use

-   Verification code entry for email or SMS confirmation
-   Two-factor authentication (2FA) flows
-   PIN entry screens for secure access
-   Any scenario requiring a fixed-length numeric or alphanumeric code

Preview Code

Default (6 digits)

Preview Code

2FA Verification

### Two-factor authentication

Enter the 6-digit code from your authenticator app.

Verify

Preview Code

4 Digit Code

Preview Code

Variable Length

Length:

4 digits 6 digits 8 digits

Dynamically change the number of OTP digits.

Preview Code

Paste Support

Try pasting a code like "123456" into any field

## API Reference

### OtpInput

Prop

Type

Default

Description

Length

int

6

Number of input fields.

Value

string

""

Current OTP value. Use with @bind-Value for two-way binding.

ValueChanged

EventCallback<string>

—

Callback invoked when the value changes.

OnComplete

EventCallback<string>

—

Callback invoked when all fields are filled.

InputMode

string

"Numeric"

Input validation mode. Values: "Numeric", "Alphanumeric", "Password".

Disabled

bool

false

Disables all input fields.

Masked

bool

false

Hides input characters (password-style).

Separator

string?

null

Character displayed between groups (e.g. "-").

GroupSizes

int\[\]?

null

Defines how inputs are grouped (e.g. \[3,3\] for two groups of three).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

Required

bool

false

Marks the field as required for form validation.

Invalid

bool

false

Applies error styling to indicate a validation error.

ErrorText

string?

null

Error message shown below when Invalid is true (standalone).

HelperText

string?

null

Help text shown below when there is no error (standalone).

Label

string?

null

Inline label rendered above the input (standalone).

Name

string?

null

HTML name attribute for form identification.

FormField

FormFieldContext?

null

Cascaded context from a parent FormField; drives validation state automatically.

## Related Components

-   [Input](/components/input) — Standard text input for general free-form text
-   [PasswordInput](/components/password-input) — Password field with visibility toggle and strength meter
-   [Form](/components/form) — Combine OtpInput with form validation and labels