Alphanumeric codes and paste cleanup in input-otp

Backup and invite codes often mix letters and digits and get copied with separators. pasteTransformer cleans the clipboard text before it reaches the field.

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

Alphanumeric codes and paste cleanup in 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

Allow letters and digits. pattern={REGEXP_ONLY_DIGITS_AND_CHARS} accepts both, and onChange stores the value in upper case. [1]
Clean the pasted text. pasteTransformer removes the dash from K7Q-4ZP, so the six remaining characters fit the six slots. [1]
Pick the right keyboard. inputMode="text" is set because a numeric keypad cannot type the letters in these codes. [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 { useState } from "react";
import { OTPInput, REGEXP_ONLY_DIGITS_AND_CHARS } 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() {
  const [value, setValue] = useState("");
  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 a backup code</h3>
        <p style={{ margin: "0 0 16px", fontSize: 13, color: "#a9b0c0" }}>
          Copy <span style={{ userSelect: "all", color: "#f2f4f8", background: "#2a2f3a", padding: "2px 6px", borderRadius: 4 }}>K7Q-4ZP</span> and paste it below.
        </p>
        <OTPInput
          maxLength={6}
          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
          inputMode="text"
          // strip the dash before the pasted text is validated
          pasteTransformer={(pasted) => pasted.replaceAll("-", "")}
          value={value}
          onChange={(next) => setValue(next.toUpperCase())}
          autoFocus
          render={({ slots }) => (
            <div className="otp-row">
              {slots.map((slot, idx) => <Slot key={idx} {...slot} />)}
            </div>
          )}
        />
        <p style={{ margin: "14px 0 0", fontSize: 13, color: "#a9b0c0" }}>
          Value: <b style={{ color: "#9fe6a0" }}>{value || "(empty)"}</b>
        </p>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Copy the sample code with the dash and paste it into the boxes: the dash is dropped. 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 basic OTP input with input-otp A digits-only PIN in input-otp Auto-submit a code with onComplete Two slot groups with a dash 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 →