A basic OTP input with input-otp

input-otp renders one real text input and hands you per-slot state, so you draw the OTP boxes yourself in any style.

All input-otp examples input-otp: usage and stats

A basic OTP input with input-otp: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

One component, a slot count. <OTPInput maxLength={6} /> sets how many slots the field has. The render prop gets a slots array and returns the markup for the boxes. [1]
Draw each slot. The Slot component prints char ?? placeholderChar and adds an outline when isActive is true. [1]
Paint your own caret. When hasFakeCaret is true the slot shows a blinking bar made with a CSS animation in the <style> element. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { OTPInput } from "input-otp";

const CSS = `
.otp-row { display: flex; }
.otp-slot { position: relative; width: 46px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #3a3f4b; border-left-width: 0; background: #1c1f26; color: #f2f4f8;
  font: 600 24px system-ui, sans-serif; outline: 2px solid transparent; transition: outline-color .15s; }
.otp-slot:first-child { border-left-width: 1px; border-radius: 10px 0 0 10px; }
.otp-slot:last-child { border-radius: 0 10px 10px 0; }
.otp-slot.active { outline-color: #6c8cff; z-index: 1; }
.otp-caret { position: absolute; width: 2px; height: 26px; background: #f2f4f8; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
`;

// One visible box per slot; the real input sits invisibly on top
function Slot({ char, placeholderChar, isActive, hasFakeCaret }) {
  return (
    <div className={isActive ? "otp-slot active" : "otp-slot"}>
      {char ?? placeholderChar}
      {hasFakeCaret && <div className="otp-caret" />}
    </div>
  );
}

export default function App() {
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" }}>
      <style>{CSS}</style>
      <div style={{ background: "#16181d", padding: "26px 32px", borderRadius: 14, color: "#e8eaf0", boxShadow: "0 10px 30px rgba(0,0,0,.5)" }}>
        <h3 style={{ margin: "0 0 6px", fontSize: 18 }}>Enter your code</h3>
        <p style={{ margin: "0 0 18px", fontSize: 13, color: "#a9b0c0" }}>Click the boxes and type six characters.</p>
        <OTPInput
          maxLength={6}
          autoFocus
          render={({ slots }) => (
            <div className="otp-row">
              {slots.map((slot, idx) => <Slot key={idx} {...slot} />)}
            </div>
          )}
        />
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Type, paste, select or delete inside the boxes: everything goes through one invisible input. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with input-otp 1.5.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More input-otp examples

A digits-only PIN in input-otp Auto-submit a code with onComplete Two slot groups with a dash in input-otp Alphanumeric codes and paste cleanup in input-otp

Sources

Docs: docs › api

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with input-otp? Ask AgentGid →