Pin Input
OTP / 验证码输入 — N 个单字符框自动推进 / 退格回退 / 方向键导航 / 粘贴填充联动。首框预设 autocomplete="one-time-code"（iOS/Android 可显示短信码候选）。numeric（默认）/ 字母数字，length / size / masked / autofocus 等 prop。组合值通过隐藏 input 随表单提交。
default length=6, type=numeric, size=md — 6 桁 OTP の典型
6 桁の認証コードを入力
masked — 4 桁 PIN を •••• 表示
入力中は伏字
alphanumeric — 8 文字の招待コード
英数字 (0-9 a-z A-Z)
pre-filled — value で初期値 "123" をセット (残り 3 桁を埋める)
続きを入力
size variants — xs / sm / md (default) / lg
xs
sm
md
lg
error state — box border + ring が error tone に
Code expired — request a new one
paste 試し — 適当な 6 桁数字をコピーして 1 つ目の box に paste すると全 box が一気に埋まる
clipboard から '123456' を paste してみる
使い方
{{-- 最小 — 6 桁 OTP (default) --}}
<x-pin-input name="otp" label="Verification code" autofocus />
{{-- 4 桁 PIN を masked で --}}
<x-pin-input name="pin" label="PIN" :length="4" masked />
{{-- 8 文字の英数字招待コード --}}
<x-pin-input name="code" label="Invite code" :length="8" type="alphanumeric" />
{{-- 初期値セット --}}
<x-pin-input :length="6" value="123" />
{{-- size: xs / sm / md (default) / lg --}}
<x-pin-input size="sm" :length="4" />
{{-- error state — box border が error に flip --}}
<x-pin-input :length="6" error="Code expired" />