Aspyn

Input OTP

Segmented one-time-code entry.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@aspyn-io/kit";

Six-digit verification

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Notes

  • Controlled: value + onChange; fires onComplete when all slots fill.
  • Paste, arrow keys, and screen-reader announcements handled by input-otp.