Build an OTP input in React where paste, iOS autofill and Android SMS codes all work

Six separate boxes look right and break the moment someone pastes "123 456" or taps the code iOS suggests above the keyboard, because the whole code lands in the first box. This page builds the field as one real input with autocomplete="one-time-code" and draws the boxes from its value, then shows the paste handler you need if you keep six inputs, and the Android Web OTP call.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: one input, drawn as boxes

components/otp-field.tsx

"use client";

import { useRef, useState, type ChangeEvent } from "react";

type Props = {
  length?: number;
  onComplete?: (code: string) => void;
  disabled?: boolean;
};

// One real input carries the whole code, so paste, iOS and Android SMS
// autofill and password managers all land in the same place. The boxes
// are only a drawing of its value.
export function OtpField({ length = 6, onComplete, disabled }: Props) {
  const ref = useRef<HTMLInputElement>(null);
  const [code, setCode] = useState("");
  const [focused, setFocused] = useState(false);

  function onChange(e: ChangeEvent<HTMLInputElement>) {
    // Pasted text can be "123 456", "123-456" or "Your code is 123456".
    const next = e.target.value.replace(/\D/g, "").slice(0, length);
    setCode(next);
    if (next.length === length) onComplete?.(next);
  }

  const active = focused ? Math.min(code.length, length - 1) : -1;

  return (
    <div className="relative w-fit" onClick={() => ref.current?.focus()}>
      <input
        ref={ref}
        value={code}
        onChange={onChange}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        disabled={disabled}
        inputMode="numeric"
        autoComplete="one-time-code"
        pattern="\d*"
        maxLength={length}
        aria-label={`Verification code, ${length} digits`}
        className="absolute inset-0 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none"
      />
      <div aria-hidden="true" className="flex gap-2">
        {Array.from({ length }, (_, i) => (
          <span
            key={i}
            className={`grid size-12 place-items-center rounded-lg border text-xl font-medium tabular-nums transition-colors ${
              i === active ? "border-zinc-900 ring-2 ring-zinc-900/15 dark:border-white" : "border-zinc-300 dark:border-zinc-700"
            }`}
          >
            {code[i] ?? ""}
          </span>
        ))}
      </div>
    </div>
  );
}

Good to know

One input is the whole trick. iOS puts the suggested code into whichever field has autocomplete="one-time-code", password managers fill one field, and a paste goes into one field. With a single input all three just set its value.
The input sits on top of the boxes with opacity 0, so taps anywhere on the row focus it and the phone opens the number pad from inputMode="numeric".
The onChange keeps digits only and cuts at the length, so "Your code is 123456" pasted from an email still works.
The aria-label says how many digits to type. Screen readers read one field instead of six unlabeled boxes.
onComplete fires when the last digit lands. If you submit there, also keep a normal submit button for people who type slowly and fix a digit.
What we ran on October 27, 2026: every file on this page type-checks with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28 in strict mode, and passing a string as length fails that check. spread() ran in Node: a full code pasted into box 4, one digit typed, "Code: 123 456" pasted, two digits in box 5 and a delete all gave the expected boxes and focus. We didn't test autofill on a phone for this page, and the Web OTP call is not run here.

If you keep six separate inputs

Some designs need real separate inputs. Then every box needs the same handler: when more than one digit arrives in a change event, it's a paste or autofill, so spread the digits across the boxes and move focus to the last filled one. A full-length code starts at box 0 even if it landed in box 3.
Put autocomplete="one-time-code" on the first box only, call spread() from each box's onChange, and focus the box it returns. Backspace on an empty box should move focus back one.

lib/split-paste.ts

// For a row of separate inputs: decide what a change event in box i means.
// Paste and iOS autofill put the whole code into one box at once.
export function spread(prev: string[], index: number, typed: string, length: number) {
  const digits = typed.replace(/\D/g, "");
  const next = [...prev];
  if (digits.length <= 1) {
    next[index] = digits;
    return { next, focus: digits ? Math.min(index + 1, length - 1) : index };
  }
  // Several digits arrived: treat it as the code from this box onward,
  // or from box 0 when it is a full code.
  const start = digits.length >= length ? 0 : index;
  for (let i = 0; i < digits.length && start + i < length; i++) next[start + i] = digits[i];
  return { next, focus: Math.min(start + digits.length, length - 1) };
}

Android: read the SMS with Web OTP

Chrome on Android can read the code from the SMS itself, with the user's tap to allow it. The message needs a last line with your domain and the code, like "@example.com #123456". Call it when the field mounts and abort it when the field unmounts or the user types.
Other browsers don't have OTPCredential, so the function returns null and autocomplete="one-time-code" does the job. TypeScript's DOM types don't include the otp option yet, which is why the call casts.

lib/web-otp.ts

// Android Chrome only. The SMS must end with a line like:
//   @your-domain.com #123456
// Other browsers skip this and fall back to autocomplete="one-time-code".
type OtpCredential = Credential & { code: string };

export async function readSmsCode(signal: AbortSignal): Promise<string | null> {
  if (typeof window === "undefined" || !("OTPCredential" in window)) return null;
  try {
    const cred = (await navigator.credentials.get({
      otp: { transport: ["sms"] },
      signal,
    } as CredentialRequestOptions)) as OtpCredential | null;
    return cred?.code ?? null;
  } catch {
    return null; // aborted, denied, or timed out
  }
}

Where Step-Up OTP Gate fits

Step-Up OTP Gate is the animated version of this screen: the page stays frosted behind a code check, the cells react as digits land, and a wrong code shakes. You pass onVerify, length and onResend.
Its own "From Messages" chip shows a code you pass in as autofillCode. For the browser's SMS autofill, keep autocomplete="one-time-code" on the real input as shown on this page.

Animated OTP input for React and Tailwind, with the scoping edits for shadcn

Install

Copy from the zipPut react/src/components + react/src/data into src/, then none for this page. The paid piece uses framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

children: the page that stays frosted
onVerify: check the code, resolve true
length: number of cells
onResend: resend button

How qodesign compares

qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

From the blog: OTP Input in React: Paste, Autofill and one-time-code That Work

From the blog: Accessible Login Form in React: Labels, Errors, Motion

Questions

Why does pasting an OTP only fill the first box?

Each box is its own input with maxLength 1, so the paste goes into the focused box and gets cut. Use one input drawn as boxes, or spread the pasted digits across the boxes in onChange.

How do I get iOS to suggest the SMS code?

Put autocomplete="one-time-code" on the input. iOS shows the code from Messages above the keyboard and fills that input when tapped.

Does the Web OTP API work on iPhone?

No. It's for Chrome on Android. iPhone uses the one-time-code autofill instead.

Should the code input be type="number"?

No. Use a text input with inputMode="numeric". Number inputs drop leading zeros, and many codes start with 0.

Does the OTP gate work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Step 1: one input, drawn as boxes

components/otp-field.tsx

"use client"; import { useRef, useState, type ChangeEvent } from "react"; type Props = { length?: number; onComplete?: (code: string) => void; disabled?: boolean; }; // One real input carries the whole code, so paste, iOS and Android SMS // autofill and password managers all land in the same place. The boxes // are only a drawing of its value. export function OtpField({ length = 6, onComplete, disabled }: Props) { const ref = useRef<HTMLInputElement>(null); const [code, setCode] = useState(""); const [focused, setFocused] = useState(false); function onChange(e: ChangeEvent<HTMLInputElement>) { // Pasted text can be "123 456", "123-456" or "Your code is 123456". const next = e.target.value.replace(/\D/g, "").slice(0, length); setCode(next); if (next.length === length) onComplete?.(next); } const active = focused ? Math.min(code.length, length - 1) : -1; return ( <div className="relative w-fit" onClick={() => ref.current?.focus()}> <input ref={ref} value={code} onChange={onChange} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} disabled={disabled} inputMode="numeric" autoComplete="one-time-code" pattern="\d*" maxLength={length} aria-label={`Verification code, ${length} digits`} className="absolute inset-0 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none" /> <div aria-hidden="true" className="flex gap-2"> {Array.from({ length }, (_, i) => ( <span key={i} className={`grid size-12 place-items-center rounded-lg border text-xl font-medium tabular-nums transition-colors ${ i === active ? "border-zinc-900 ring-2 ring-zinc-900/15 dark:border-white" : "border-zinc-300 dark:border-zinc-700" }`} > {code[i] ?? ""} </span> ))} </div> </div> ); }

Good to know

One input is the whole trick. iOS puts the suggested code into whichever field has autocomplete="one-time-code", password managers fill one field, and a paste goes into one field. With a single input all three just set its value.

The input sits on top of the boxes with opacity 0, so taps anywhere on the row focus it and the phone opens the number pad from inputMode="numeric".

The onChange keeps digits only and cuts at the length, so "Your code is 123456" pasted from an email still works.

The aria-label says how many digits to type. Screen readers read one field instead of six unlabeled boxes.

onComplete fires when the last digit lands. If you submit there, also keep a normal submit button for people who type slowly and fix a digit.

What we ran on October 27, 2026: every file on this page type-checks with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28 in strict mode, and passing a string as length fails that check. spread() ran in Node: a full code pasted into box 4, one digit typed, "Code: 123 456" pasted, two digits in box 5 and a delete all gave the expected boxes and focus. We didn't test autofill on a phone for this page, and the Web OTP call is not run here.

If you keep six separate inputs

Some designs need real separate inputs. Then every box needs the same handler: when more than one digit arrives in a change event, it's a paste or autofill, so spread the digits across the boxes and move focus to the last filled one. A full-length code starts at box 0 even if it landed in box 3.

Put autocomplete="one-time-code" on the first box only, call spread() from each box's onChange, and focus the box it returns. Backspace on an empty box should move focus back one.

lib/split-paste.ts

// For a row of separate inputs: decide what a change event in box i means.
// Paste and iOS autofill put the whole code into one box at once.
export function spread(prev: string[], index: number, typed: string, length: number) {
  const digits = typed.replace(/\D/g, "");
  const next = [...prev];
  if (digits.length <= 1) {
    next[index] = digits;
    return { next, focus: digits ? Math.min(index + 1, length - 1) : index };
  }
  // Several digits arrived: treat it as the code from this box onward,
  // or from box 0 when it is a full code.
  const start = digits.length >= length ? 0 : index;
  for (let i = 0; i < digits.length && start + i < length; i++) next[start + i] = digits[i];
  return { next, focus: Math.min(start + digits.length, length - 1) };
}

Android: read the SMS with Web OTP

Chrome on Android can read the code from the SMS itself, with the user's tap to allow it. The message needs a last line with your domain and the code, like "@example.com #123456". Call it when the field mounts and abort it when the field unmounts or the user types.

Other browsers don't have OTPCredential, so the function returns null and autocomplete="one-time-code" does the job. TypeScript's DOM types don't include the otp option yet, which is why the call casts.

lib/web-otp.ts

// Android Chrome only. The SMS must end with a line like:
//   @your-domain.com #123456
// Other browsers skip this and fall back to autocomplete="one-time-code".
type OtpCredential = Credential & { code: string };

export async function readSmsCode(signal: AbortSignal): Promise<string | null> {
  if (typeof window === "undefined" || !("OTPCredential" in window)) return null;
  try {
    const cred = (await navigator.credentials.get({
      otp: { transport: ["sms"] },
      signal,
    } as CredentialRequestOptions)) as OtpCredential | null;
    return cred?.code ?? null;
  } catch {
    return null; // aborted, denied, or timed out
  }
}

Where Step-Up OTP Gate fits

Step-Up OTP Gate is the animated version of this screen: the page stays frosted behind a code check, the cells react as digits land, and a wrong code shakes. You pass onVerify, length and onResend.

Its own "From Messages" chip shows a code you pass in as autofillCode. For the browser's SMS autofill, keep autocomplete="one-time-code" on the real input as shown on this page.

Questions

Why does pasting an OTP only fill the first box?

Each box is its own input with maxLength 1, so the paste goes into the focused box and gets cut. Use one input drawn as boxes, or spread the pasted digits across the boxes in onChange.

How do I get iOS to suggest the SMS code?

Put autocomplete="one-time-code" on the input. iOS shows the code from Messages above the keyboard and fills that input when tapped.

Does the Web OTP API work on iPhone?

No. It's for Chrome on Android. iPhone uses the one-time-code autofill instead.

Should the code input be type="number"?

No. Use a text input with inputMode="numeric". Number inputs drop leading zeros, and many codes start with 0.

Does the OTP gate work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.