0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
M
o
t
p
input-otp

Stop wasting time building OTP inputs.

One-time passcode input for React. Unstyled, accessible, and copy-paste friendly out of the box.

·
Get started
$ npm install input-otp
Looking for an authentication solution? Get started with Clerk
USED BY_
Vercel
xAI
Lovable
TRUSTED AT SCALE_

845,489,561 total downloads, growing by about 38 a second.

total downloads · 23M weekly
featured in shadcn/ui

Spotted by the best

People we admire, admiring back_
Guillermo Rauch on X, Feb 19, 2024
Guillermo RauchVercel
@rauchg

This React OTP input 🔥 input-otp.rodz.dev

Founder & CEO of Vercel

Emil Kowalski on X, Jul 6, 2026
Emil KowalskiLinear
@emilkowalski

Some of my favorite UI libraries: … input-otp for one-time passwords. …

Design Engineer at Linear, author of animations.dev, sonner and vaul

Steven Tey on X, Feb 19, 2024
Steven TeyDub.co
@steventey
Replying to @rauchg @guilherme_rodz

incredible work @guilherme_rodz 👏

Founder & CEO of Dub

Guillermo Rauch on X, Feb 19, 2024
Guillermo RauchVercel
@rauchg

This React OTP input 🔥 input-otp.rodz.dev

Founder & CEO of Vercel

Emil Kowalski on X, Jul 6, 2026
Emil KowalskiLinear
@emilkowalski

Some of my favorite UI libraries: … input-otp for one-time passwords. …

Design Engineer at Linear, author of animations.dev, sonner and vaul

Steven Tey on X, Feb 19, 2024
Steven TeyDub.co
@steventey
Replying to @rauchg @guilherme_rodz

incredible work @guilherme_rodz 👏

Founder & CEO of Dub

~/sponsors#

Clerk
DIAMOND SPONSOR
EvomiHERO SPONSOR
RapidproxyHERO SPONSOR
~/features

Small API.
Unusually capable.

What a single native input can do when the visible slots only mirror its state.

01

One real input. Native wins.

The slots are visual. The browser, keyboard and assistive tech still meet a single HTML input.

02

Bring your own styles

The same component, four render props. Pick one, or let it cycle.

keycaps.tsx
03

Friendly to password managers

Detect the injected badge, make 40px of clipped room, and keep it clear of the final slot.

width: calc(100% + 40px)clip-path: inset(0 40px 0 0)
04

Pattern validation

Import the library’s regex and pass it directly to the real input.

+import { REGEXP_ONLY_DIGITS } from 'input-otp'
<OTPInput
+ pattern={REGEXP_ONLY_DIGITS}
maxLength={6} />
05

Tiny and dependency-free

Measured from the published input-otp@1.4.2 package.

9.8 kB
minified ESM
0
runtime dependencies

How I built it#

One real input, wearing your design — the slots you see just mirror its state. Keep scrolling_
1
4
1
9
5
2
countless hours of DX, so you never think about this

Your last OTP input.

MIT licensed, zero dependencies, one real input under the slots.

Get started 3.2k on GitHub