SponsorYour name here · $500/mo
name thatuiuser interface

Enter the 6-digit code

We sent it to a•••@example.com

4
8
2

Click and type a digit: each box is a slot, and the ringed one with the blinking line is the active slot

One-Time Code Input (OTP Input)

/ autocomplete="one-time-code" · <InputOTP maxLength={6}> /

also called OTP field, PIN input, verification code input, one-time password field, 2FA code input

“The row of separate boxes where you type the code from a text message” is a one-time code input, usually called an OTP input (shadcn/ui InputOTP), the row a site shows after sign-in when it texts or emails a six-digit code. Each box, called a slot, holds one digit; the ring and blinking line jump to the next slot as you type, Backspace steps back, and a pasted code fills every box. The separate boxes are a look: one real input behind them, marked autocomplete="one-time-code", is the build that keeps phone autofill, paste and screen readers working. It is not the iPhone lock screen's row of dots, and unlike a segmented control, you type into it.

If you called it…

“the row of separate boxes where you type the code from a text message”“a separated texts that you enter number inside it”“six little square boxes, one number in each, and the cursor jumps to the next”“the typical single digit boxes thing”“an input with 6 square boxes for people to enter their codes”“the boxes with a dash in the middle for the login code”

…you meant One-Time Code Input (OTP Input).

Anatomy — every part, named

  1. 1
    Slot (digit box)<InputOTPSlot>

    “One of the single digit boxes” is a slot: it shows one character of the code and nothing else.

  2. 2
    Active slotisActive · hasFakeCaret

    “The box that's highlighted, with a blinking line in it” is the active slot: the one the next digit goes into.

  3. 3
    Group separator<InputOTPSeparator>

    “The dash in the middle of the boxes” is the group separator: it splits six digits into two threes so the code is easier to read.

Prompt — paste into your agent

Build a one-time code input (OTP input; shadcn/ui InputOTP, built on the input-otp library): six one-digit boxes in two groups of three with a short dash between. The box that takes the next digit gets a ring and, while it is empty, a thin blinking bar. Behind the boxes use one real <input type="text" inputmode="numeric" autocomplete="one-time-code">, never six separate inputs, so text-message autofill and paste keep working.

Debug prompt — when it misbehaves

Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.

Debug my one-time code input (OTP input; autocomplete="one-time-code", inputmode="numeric", shadcn/ui InputOTP). Rule out: six separate <input>s, so a pasted code lands in the first box only and phone autofill fills one box; Backspace on an empty box not stepping back to the previous one; type="number" stripping leading zeros; no caret in the empty active box because the real caret is transparent and no bar is drawn; a pasted "123 456" or "123-456" rejected because the space or dash is not stripped; autocomplete overridden, so the phone never offers the code. The symptom:

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

HTMLautocomplete="one-time-code"lets a phone offer the code from the text message
shadcn/ui<InputOTP maxLength={6}>with InputOTPGroup, InputOTPSlot and InputOTPSeparator
HTMLinputmode="numeric"the digit keyboard; keep type="text" so leading zeros survive
RadixOneTimePasswordField.Rootstill exported with an unstable_ prefix
Ant Design<Input.OTP length={6} />5.16+
Mantine<PinInput length={6} oneTimeCode />

See also

Form FieldWebSign-in FormWebFocus Ring (:focus-visible)WebInsertion Caret (Insertion Point)macOSWheel Picker vs. Time Field vs. Clock DialWeb
From the maker of this site48h Icons · Custom Apple app icons in 48 hours