One-Time Password Field

Overview

One-Time Password Field renders a role="group" cluster of single-character cells that share one aggregate value. Typing auto-advances and Backspace retreats; pasting (or SMS autofill) fills the whole field at once. ValidationType accepts numeric, alpha, or alphanumeric input, and an optional hidden input carries the aggregate value for form posts.

Anatomy

@using Navius.Primitives.Components.OneTimePasswordField

<NaviusOneTimePasswordField>
    <NaviusOneTimePasswordFieldInput Index="0" />
    <NaviusOneTimePasswordFieldInput Index="1" />
    @* … one per cell … *@
    <NaviusOneTimePasswordFieldHiddenInput Name="otp" />
</NaviusOneTimePasswordField>

Root

Prop	Type	Default	Description
`Length`	`int`	`6`	Number of single-character cells (and the maximum value length).
`Value`	`string?`	-	Controlled aggregate value. Pair with `ValueChanged` (`@bind-Value`).
`ValueChanged`	`EventCallback<string>`	-	Fires when the controlled `Value` should change.
`DefaultValue`	`string?`	-	Initial aggregate value when uncontrolled.
`Disabled`	`bool`	`false`	Disables every cell.
`ReadOnly`	`bool`	`false`	Marks every cell read-only.
`InputMode`	`string`	`"numeric"`	`inputmode` for each cell.
`ValidationType`	`string`	`"numeric"`	Accepted character class: `"numeric"`, `"alpha"`, or `"alphanumeric"`.
`SanitizeValue`	`Func<string,string>?`	-	Optional transform applied to each character/pasted value, after `ValidationType` filtering.
`Type`	`string`	`"text"`	Rendered cell type; `"password"` masks the glyph.
`Orientation`	`string`	`"vertical"`	`"vertical"` or `"horizontal"`.
`Placeholder`	`string?`	-	Applied to empty cells.
`AutoFocus`	`bool`	`false`	Focuses the first cell on mount.
`AutoSubmit`	`bool`	`false`	Submits the owning form once every cell is filled.
`OnComplete`	`EventCallback<string>`	-	Fires when every cell is filled.
`OnAutoSubmit`	`EventCallback<string>`	-	Fires when the field is filled and `AutoSubmit` triggers a submission.
`Name`	`string?`	-	Form field name; when set with no explicit HiddenInput part, an implicit hidden input is rendered.
`Form`	`string?`	-	Id of the form to associate the implicit hidden input with.
`ChildContent`	`RenderFragment?`	-	Explicit cell markup (overrides the auto-rendered cells).
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Input

Prop	Type	Default	Description
`Index`	`int`	-	Zero-based slot this cell occupies within the field.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `input`.

HiddenInput

Prop	Type	Default	Description
`Name`	`string?`	-	Form field name submitted with the owning form.
`Form`	`string?`	-	Id of an associated form element when the input is outside that form.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `input`.

Data attributes

Part	Attribute	Description
Root	`data-orientation`	`"horizontal"` \| `"vertical"`
Root	`data-disabled`	Present when disabled.
Input	`data-filled`	Present when the cell has a character.
Input	`data-index`	The cell’s zero-based index.
Input	`data-orientation`	`"horizontal"` \| `"vertical"`
Input	`data-disabled`	Present when disabled.
Input	`data-readonly`	Present when read-only.

Keyboard interactions

Key	Behavior
`0-9 / a-z`	Writes the focused cell and advances to the next.
`Backspace`	Clears the focused character (or the previous when empty) and retreats.
`Ctrl/Cmd + Backspace`	Clears the entire field and focuses the first cell.
`Delete`	Clears the focused character and shifts the rest back.
`ArrowLeft / ArrowRight`	Moves between cells (horizontal orientation).
`ArrowUp / ArrowDown`	Moves between cells (vertical orientation).
`Home / End`	Jumps to the first / last cell.
`Enter`	Submits the owning form.

ARIA mechanism

The cells are grouped with role="group"; each cell is named “Character N of M” via aria-label. Cells use autocomplete="one-time-code" for SMS autofill. Covered by the Playwright browser test suite.