Input OTP
@xui/input-otpA segmented one-time-code / PIN field. A single hidden input drives the row, so native caret, paste and one-time-code autofill all work. value is two-way bindable; completed fires when every slot is filled.
Install
pnpm add @xui/input-otp Add the barrel to a standalone component's imports:
import { XuiInputOtpImports } from '@xui/input-otp';
@Component({
imports: [XuiInputOtpImports],
// …
})Examples
Basic
Loading preview…
<div class="flex flex-col gap-4">
<xui-input-otp [length]="6" [(value)]="code" />
<span class="text-foreground-muted text-sm">Value: {{ code || '—' }}</span>
</div>Four digits
Loading preview…
<xui-input-otp [length]="4" [(value)]="code" />Masked
Loading preview…
<xui-input-otp [length]="4" mask [(value)]="code" />Alphanumeric
Loading preview…
<xui-input-otp [length]="5" inputType="text" [(value)]="code" />API
A segmented one-time-code / PIN field. A single hidden input drives the whole row — so native caret, selection, paste and autofill (one-time-code) all work — while the visible slots render each character. value is two-way bindable; completed fires once every slot is filled.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''lengthnumberHow many characters the code has, and so how many slots are drawn.6valuestringThe code entered so far — a single string, not one value per slot. Two-way bindable with [(value)].''disabledbooleanBlock entry and dim the slots.falseinputType'numeric' | 'text'numeric restricts entry to digits and asks for the numeric keypad; text accepts anything.'numeric'maskbooleanRender each filled slot as a dot instead of the character.falseOutputs
completedstringFired once every slot is filled.