Input OTP

Overview

Input OTP is a four-part composite. ZitsInputOtp renders NaviusOneTimePasswordField (role="group", per-cell inputs, paste distribution, keyboard navigation), and ZitsInputOtpSlot renders one NaviusOneTimePasswordFieldInput per cell (a real <input> per slot, so the active state maps to :focus). ZitsInputOtpGroup (a visual cluster of slots) and ZitsInputOtpSeparator (a divider between groups, a dot glyph by default) are plain divs with no composed Navius primitive.

Install

navius add otp --to ./src/MyApp --namespace MyApp.Ui

Usage

<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; }

Parts and props

ZitsInputOtpSeparator.ChildContent overrides the default dot glyph; otherwise none of the four parts add a prop beyond what the composed Navius primitive already exposes. ZitsInputOtp forwards Length, Value, ValueChanged, DefaultValue, Disabled, ReadOnly, InputMode, ValidationType, Type, Orientation, Placeholder, AutoFocus, Name, Form, AutoSubmit, OnAutoSubmit, OnComplete, and Attributes straight to NaviusOneTimePasswordField. ZitsInputOtpSlot forwards Index to NaviusOneTimePasswordFieldInput.

Styling surface

Every part accepts class/Attributes, merged via Cn.Class/Cn.Merge with the caller’s classes applied last. There are no variant/size parameters.

Data attribute hooks

Input OTP relies on native :focus for its active-cell state (the primitive renders a real <input> per slot), not a data-* hook. ZitsInputOtpSeparator renders role="separator".