Components / One-Time Password Field

One-Time Password Field

A group of single-character inputs for entering a one-time code, with auto-advance, paste, and SMS autofill.

Enter the 6-digit code (try pasting one).

razor

<NaviusOneTimePasswordField @bind-Value="_code" Length="6" Orientation="horizontal">
    @for (var i = 0; i < 6; i++)
    {
        <NaviusOneTimePasswordFieldInput Index="i" class="..." />
    }
    <NaviusOneTimePasswordFieldHiddenInput Name="otp" />
</NaviusOneTimePasswordField>

@code { private string _code = ""; }

Features

Auto-advances on type and retreats on backspace; full arrow / Home / End navigation.
Pasting (or SMS autofill) fills the whole field at once.
Numeric / alpha / alphanumeric validation, optional AutoSubmit, and a hidden input for form posts.
Controlled (@bind-Value) or uncontrolled (DefaultValue).

Installation

Terminal bash

navius add one-time-password-field

Anatomy

razor

@using Navius.Primitives.Components.OneTimePasswordField

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

API Reference

Root

Groups the cells (role="group") and owns the aggregate value. Renders a div.

Prop	Type	Default
Length	int	6
Value	string?	-
ValueChanged	EventCallback<string>	-
DefaultValue	string?	-
Disabled	bool	false
ReadOnly	bool	false
InputMode	string	"numeric"
ValidationType	string	"numeric"
SanitizeValue	Func<string,string>?	-
Type	string	"text"
Orientation	string	"vertical"
Placeholder	string?	-
AutoFocus	bool	false
AutoSubmit	bool	false
OnComplete	EventCallback<string>	-
OnAutoSubmit	EventCallback<string>	-
Name	string?	-
Form	string?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Present when disabled

Input

A single character cell. Renders an input.

Prop	Type	Default
Index	int	-

Data attributes

Data attribute	Values
[data-filled]	Present when the cell has a character
[data-index]	The cell's zero-based index
[data-orientation]	"horizontal" \| "vertical"
[data-disabled]	Present when disabled

HiddenInput

A visually-hidden input carrying the aggregate value for form submission.

Prop	Type	Default
Name	string?	-
Form	string?	-

Accessibility

The cells are grouped with role="group"; each cell is named "Character N of M". Cells use autocomplete="one-time-code" for SMS autofill.

Keyboard interactions

Key	Description
`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.