OTP Input

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<OtpInput />

Default (6 digits)

2FA Verification

Enter the 6-digit code from your authenticator app.

4 Digit Code

Variable Length

Length:

Dynamically change the number of OTP digits.

Paste Support

Try pasting a code like "123456" into any field

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.