Components / Input OTP

Input OTP

Accessible one-time-password input: a role="group" of single-character cells with paste distribution, SMS autofill, and full keyboard navigation. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

Enter your one-time password.

razor

<ZitsInputOtp @bind-Value="_value" Length="6">
    <ZitsInputOtpGroup>
        <ZitsInputOtpSlot Index="0" />
        <ZitsInputOtpSlot Index="1" />
        <ZitsInputOtpSlot Index="2" />
    </ZitsInputOtpGroup>
    <ZitsInputOtpSeparator />
    <ZitsInputOtpGroup>
        <ZitsInputOtpSlot Index="3" />
        <ZitsInputOtpSlot Index="4" />
        <ZitsInputOtpSlot Index="5" />
    </ZitsInputOtpGroup>
</ZitsInputOtp>

@code { private string _value = string.Empty; }

Installation

Terminal bash

navius add input-otp

API reference

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