Stepwise UI

OTP Input

A row of individual digit boxes for one-time codes. Auto-advances on entry, steps back on Backspace, handles paste, and navigates with arrow keys. Best used inside a bottom Drawer.

Installation

npx stepwise-ui add otp-input

Default

Didn't get the code?Resend in 0:15

0/6 digits entered

import { OtpInput } from '@/components/stepwise/otp-input'

const [otp, setOtp] = useState('')

<OtpInput length={6} value={otp} onChange={setOtp} />

Security code

Set type="alphanumeric" to accept letters and digits (auto-uppercased) - for security or redemption codes like 7F3K9Q.

Letters + digits · e.g. 7F3K9Q

// letters + digits, auto-uppercased - a security / redemption code
<OtpInput type="alphanumeric" length={6} value={code} onChange={setCode} />

Lengths

Any length via length - a 4-digit PIN, an 8-character code, whatever you need.
4 digits
8 characters
<OtpInput length={4} />                        // 4-digit PIN
<OtpInput type="alphanumeric" length={8} />    // 8-char code

Error state

1
2
3
<OtpInput length={6} value={otp} onChange={setOtp} error />

Props

PropTypeDescription
length
number
Number of boxes. Default 6 - any length.
type
"numeric" | "alphanumeric"
Digits only (default), or letters + digits.
value
string
Controlled value.
onChange
(value: string) => void
Fires with the full digit string on every change.
error
boolean
Red ring on all boxes.
disabled
boolean
Disables all inputs.