COMPONENT 26 · Text & File Inputs

验证码输入

OTP / PIN Input

也叫One-time CodePIN FieldVerification Code验证码格子

输入一次性验证码或短 PIN，常以分隔字符位呈现。

Captures a short one-time code or PIN, often shown as separated character slots.

ANATOMY & USAGE

结构与使用建议

组成部分

整体标签
字符输入位
重发或错误提示

适合使用

验证流程需要输入短数字或字母代码时。

不建议使用

普通密码或可变长度文本输入时。

键盘与无障碍

优先单一真实输入以支持粘贴和自动填充；设置 inputmode 与 autocomplete=one-time-code。

DESCRIBE IT TO AI

这样告诉编程助手

实现验证码输入（OTP / PIN Input）：输入一次性验证码或短 PIN，常以分隔字符位呈现。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<label class="demo stack" for="code">
  <span>6 位验证码</span>
  <input id="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}">
</label>