Skip to main content

验证码输入 InputOTP

验证码输入组件，可自由输入数字。

📦 引入方式​

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@npmqg/react-ui-input-otp';

🧩 使用示例​

📚 基本使用​

📚 受控模式​

import React from 'react';

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@npmqg/react-ui-input-otp';

export default function OTPDemo() {
  const [otp, setOtp] = React.useState('');

  return (
    <div className="flex flex-col items-center justify-center h-screen gap-6">
      <h2 className="text-xl font-medium text-gray-700">请输入验证码</h2>

      <InputOTP length={6} onChange={setOtp} value={otp}>
        <InputOTPGroup className="gap-2">
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />

          <InputOTPSeparator />

          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>

      <p className="text-gray-600">当前输入：{otp || '（空）'}</p>
    </div>
  );
}

🧱 依赖项​

  • @npmqg/utils-cn 中的 cn() 类名合并工具（类似 clsx）
  • input-otp