Input OTP · Animate UI

可访问的一次性密码输入框：键入的字符弹入，粘贴的整串验证码依次错开落下。API 与 input-otp 完全一致。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

input-otp.tsx

import {
  OTPInput,
  OTPInputContext,
  REGEXP_ONLY_DIGITS,
} from '@animate-ui/react/primitives/input-otp';

input-otp.tsx

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@/components/ui/input-otp';
import { REGEXP_ONLY_DIGITS } from '@animate-ui/react/primitives/input-otp';

export function VerificationCode() {
  return (
    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  );
}

动效

键入字符先以 70% 大小、半透明落在格子的底部中央，50ms 后长到正常大小，弹簧 stiffness 500 / damping 45。
粘贴时每个字符依次错开入场；减少动效下字符直接出现。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

这一页没有额外的动画属性，API 与 Animate UI 相同。