Input OTP
Freev1.0.0The shadcn Input OTP for one-time codes, with verify and error states.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { InputOTPVerify } from "@/components/ui/notchset/input-otp";
export function VerifyEmail({ verify, resend }: { verify: (code: string) => Promise<boolean>; resend: () => Promise<void> }) {
return <InputOTPVerify onComplete={verify} onResend={resend} />;
}Props
InputOTP–input-otp props + state, uppercaseshadcn's root; state is idle, checking, ok or bad.
InputOTPGroup / InputOTPSlot / InputOTPSeparator–componentsAs shadcn; the separator fills once `after` characters are in.
InputOTPVerify–{ length, onComplete, onResend, resendAfter, tries, labels }The designed whole: verify, status and resend.
Anatomy
- Built on input-otp, like shadcn's: the same parts and props.
- One file serves both builds.
- InputOTPVerify handles stale checks: a resend cancels a pending verify.
InputOTPdata-slot="input-otp"The input.
InputOTPSlotdata-slot="input-otp-slot"One cell.
InputOTPVerifydata-slot="input-otp-verify"The designed whole.
Source
components/ui/notchset/input-otp.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/input-otp.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/input-otp.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add input-otp@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/input-otp.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Two-factor codes, approval codes, email verification
Use something else when
- Passwords: use Password Field
Mistakes to avoid
- Return a Promise from onComplete; the cells lock while it runs
Agents find it by
- otp, one-time code, verification code, 2fa code, pin input, shadcn input otp, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/input-otp.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Type / paste
- Fill
- Backspace
- Step back
Accessibility
- One real input with autocomplete one-time-code: paste and SMS autofill work
- Letters and digits are accepted and upper-cased
- The status line is polite live text
Motion
- Type
- Each character settles in from 6px (320ms pop); the caret blinks
- Approved
- Cells fill ink 50ms apart
- Wrong
- Signal, a ±4px shake, then the code clears after 700ms
Responsive
- Cells share the width; 56px tall at every size.
Performance
- One input and six cells; the shake uses the Web Animations API.
Changelog
v1.0.0 · 2026-10-02
First release
