OTP Input

Customizable OTP input system with multi-field inputs, paste handling, keyboard navigation, and password masking.

Usage

npm install @frjoy/otp

Live Demo 1: Basic OTP

Entered OTP: -

<Root onChange={setOtp} type="number" password>
  <Label>Enter OTP</Label>
  {[...Array(6)].map((_, i) => (
    <Input key={i} length={1} />
  ))}
</Root>

Live Demo 2: Alphanumeric OTP with Joiner

This example shows a referral-style OTP code joined with -.

Joined Code: -

<Root onChange={setOtp} type="text" joiner="-">
  <Label>Referral Code</Label>
  {[...Array(4)].map((_, i) => (
    <Input key={i} length={2} />
  ))}
</Root>

Props Reference

<Root />

• onChange?: (otp: string) => void
• type?: 'number' | 'text' | 'any'
• password?: boolean
• joiner?: string
• pattern?: string

<Input />

• length?: number
• password?: boolean
• Supports all native input props

<Label />

• Automatically focuses first incomplete field
• Accessible via aria-live