Package LumeoA11yfocus-managedkeyboardDepends onform labelTested Tier 3 · 39 tests View source ↗

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.

Usage

@using Lumeo

<OtpInput />

Tested Tier 3 · A11y + behavior

all components →

Render Behavior A11y Keyboard Scale E2E

39 tests across 4 files. Auto-generated from the test suite.

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

Default (6 digits)

2FA Verification

Two-factor authentication

Enter the 6-digit code from your authenticator app.

4 Digit Code

Variable Length

Length:

Dynamically change the number of OTP digits.

Masked (PIN)

Grouped with Separator

Alphanumeric

Disabled

Invalid State

That code didn't match. Try again.

Paste Support

Try pasting a code like "123456" into any field

API Reference

OtpInput

Prop	Type	Default	Description
Length	int	6	Number of digit boxes (default 6). Must be non-negative; changing it at runtime resizes the cell buffer and re-registers the paste listener.
Value	string	""	The current code, one character per filled cell (gap-free — collapsed left after any edit). Length is capped at Length.
InputMode	string	"Numeric"	Which characters are accepted and which virtual keyboard is requested: "Numeric" (default, digits only), "Alphanumeric" (letters + digits), or "Password" (any character).
Disabled	bool	false	Disables every digit input.
Masked	bool	false	When true, renders each cell as a password input (dots) instead of plain text.
Separator	string?	—	Visual separator glyph rendered between groups when GroupSizes splits the cells into more than one group (e.g. "-" for "123 - 456").
GroupSizes	int[]?	—	Splits the Length cells into visual groups of these sizes (e.g. [3, 3] for a 6-digit code shown as two groups of three). Any cells beyond the sum of sizes form a trailing group. null (default) renders one ungrouped row.
Required	bool	false	Marks the field as required, exposed via aria-required on each cell.
Invalid	bool	false	Marks the field as invalid, applying error styling to every cell. Also derived automatically from a wrapping FormField's validation state.
ErrorText	string?	—	Error message shown below the cells when Invalid is true (standalone usage only — inside a FormField, the FormField owns error display).
HelperText	string?	—	Helper text shown below the cells when not invalid (standalone usage only).
Label	string?	—	Label rendered above the cells (standalone usage only — inside a FormField, the FormField owns the label).
Name	string?	—	Logical name for the field, matching the naming convention of sibling form controls (e.g. Select.Name) for form-association tooling.
AutoFocus	bool	false	Focuses the first OTP digit input on first render. Useful for the typical OTP flow where the field appears right after a "code sent" screen and the user should be typing immediately. See Input.AutoFocus for why the HTML autofocus attribute doesn't work in Blazor WASM.
Class	string?	—	Additional CSS classes merged onto the cells' container.
AdditionalAttributes	Dictionary<string, object>?	—	Unmatched attributes splatted onto the cells' container (not the individual inputs).

Events

ValueChanged	EventCallback<string>	Raised whenever a cell's value changes (typing, deleting, or a paste).
OnComplete	EventCallback<string>	Invoked once Value's length reaches Length (i.e. every cell is filled), whether by typing or paste.

Input — Standard text input for general free-form text
PasswordInput — Password field with visibility toggle and strength meter
Form — Combine OtpInput with form validation and labels