OTP Input

A self-contained OTP/verification-code input with four independently functional variants (bordered squares, underline, connected capsule, filled tiles). A Framer Motion spring drives the focus indicator between slots using real measured positions.

Preview

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/otp-input.json

Usage

Import the component:

import OtpShowcase, { OtpInput } from "@/components/otp-input"

Use it in your code:

<OtpInput length={6} variant="classic" />

Props

Property	Type	Default	Description
length	number	6	Number of OTP digits/slots.
variant	"classic" \| "underline" \| "pill" \| "filled"	all four	Render only this single variant instead of the full four-card demo.
value	string	-	Controlled value. Pass with onChange to control the input externally.
onChange	function	-	Called with the joined digit string whenever any slot changes.
onComplete	function	-	Called once with the full code when every slot is filled.
disabled	boolean	false	Disable every slot.
autoFocus	boolean	true	Focus the first slot on mount.
theme	"light" \| "dark" \| "system"	system	Color theme for borders, digits, and the active indicator.
className	string	-	Extra classes applied to the outermost wrapper.