build69
build69  /  Components  /  Text Inputs  /  OtpInput

OtpInput

v1.0.3Updated 28 Sept 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 · 11 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)
  • Labelled by FormField: the code input takes the id (its label names it) and the built-in "One-time code" name steps aside; FormField error paints the cells, and the own error joins aria-describedby
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—
aria-label

Accessible name; defaults to labels.ariaLabel ("One-time code") except inside a labelled FormField

string—
aria-labelledby

Id(s) of the element(s) that label the code input; wins over a FormField label

string—
id

DOM id set on the code input; FormField clones its field id in, and its label then names the control

string—
aria-describedby

Id(s) of hint or error text describing the code input (FormField clones this in)

string—
aria-invalid

Mark the code input (also paints the cells) invalid; FormField clones this in from its error prop

boolean—
aria-required

Mark the code input required; FormField clones this in from its required prop

boolean—

Related

Platform docsAll componentsSource files