build69 / Components / Text Inputs / OtpInput

OtpInput

v1.0.1Updated 20 Jul 2026

Multi-cell digit / alphanumeric verification-code input built on the shadcn input-otp primitive. Configurable length and groups, paste support, auto-submit on complete, optional resend countdown (mm:ss), and three size s

View source ← Back to catalog

Preview

Live · 10 stories

DefaultOpen ↗

▸Why this is recommendedformotpverificationcode+7

The default, out-of-the-box OtpInput.

Recommended for+14

✓Two-factor / MFA verification
✓Email or SMS verification
✓Magic-link backup code entry

Tags+6

formotpverificationcode2famfacellsinputverification codecode inputdefault

Features+4

Configurable cell count + visual grouping
Numeric or alphanumeric mode
Paste full code support
Auto-submit on complete (onComplete)
Resend countdown timer (mm:ss) with cooldown
Error state with red ring
Three size scales (sm / md / lg)

Not recommended for−2

✕Long free-text codes (use Input)
✕Password entry (use PasswordInput)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "OtpInput" })

Usage

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

<OtpInput
  value={code}
  onValueChange={setCode}
  length={6}
  groups={[3, 3]}
  autoSubmit
  onComplete={verify}
  resendable
  onResend={resend}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

value

Controlled code

string—

onValueChange

Value callback

function—

length

Cell count (default 6)

number—

groups

Cell grouping (default [3, 3])

number[]—

type

Allowed chars

'numeric' | 'alphanumeric'—

autoSubmit

Fire onComplete when full

boolean—

onComplete

Fires when all cells filled

function—

resendable

Show resend button + countdown

boolean—

resendCooldownSeconds

Cooldown (default 30)

number—

onResend

Resend callback

function—

size

Cell size

'sm' | 'md' | 'lg'—

error

Error message

string—

Platform docs All components Source files

OtpInput

Preview

Install

Usage

Props

Related