GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

OTP Input UI: 9 States, Validation Included

· Godrich · 9 items · 17 min read

InputsVanilla JSReactErrorForms

An otp input ui is the row of single-digit boxes a signup screen shows for a six-digit code, one character per box.

Auto-advance to next box01 pin-auto-advance Backspace focuses previous box02 pin-backspace-prev Paste full code across boxes03 pin-paste-full-code Force numeric mobile keypad04 pin-mobile-numeric-keypad Masked digit toggle05 pin-masked-toggle Shake and clear on error06 pin-error-shake-clear Resend countdown timer07 pin-resend-timer SMS OTP autofill08 pin-autofill-sms-otp Static focus for reduced motion09 pin-reduced-motion-static

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine below start with the three moves that make six boxes feel like one field: advancing forward, correcting backward, and accepting a full paste in one shot. Items 04 and 05 change what the keyboard and the digits themselves look like. Items 06 and 07 cover the two states a real verification flow can't skip — a wrong code and having to ask for another one. Items 08 and 09 are the idea-form entries, tying the row into what the phone's OS already does with SMS codes and into what a visitor's own reduced-motion setting demands. Watch the grid above cycle through all nine on its own. Each demo below, by contrast, is a live box that genuinely accepts typing, backspacing, and pasting rather than only playing back a loop. To widen the lens from this one widget to the whole form, the CSS input design set lays out the same input panel at large, and picking a place rather than typing a code is what the map UI design patterns handle with a dropped pin.

01Auto-advance to next box

What it does

Typing a digit into any of the six boxes strips it down to a single number, then moves focus to the next box on its own.

Auto-advance to next box
Open in a new tab

01 · Auto-advance to next box — Measured area 0.907% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

6칸자동 포커스숫자만

When an otp input field ui needs auto-advance

A regex on each input event does the sanitizing, and a plain focus() call does the jump. Reach for it in any signup or two-factor screen where the boxes are meant to read as one continuous code, not six separate fields.

boxes.forEach(function (box, i) {
  box.addEventListener('input', function () {
    box.value = box.value.replace(/[^0-9]/g, '').slice(-1);
    if (box.value && boxes[i + 1]) {
      boxes[i + 1].focus({ preventScroll: true });
    }
  });
});

02Backspace focuses previous box

What you see

A backspace on an already-empty box isn't ignored.

Backspace focuses previous box
Open in a new tab

02 · Backspace focuses previous box — Measured area 0.888% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

백스페이스이전 칸연쇄 삭제

Where it fits

It jumps back to the previous box and clears it, so fixing a mistyped digit never strands the cursor on a dead field. The jump only fires when the current box is already empty; otherwise backspace deletes normally.

boxes.forEach(function (box, i) {
  box.addEventListener('keydown', function (e) {
    if (e.key === 'Backspace' && !box.value && boxes[i - 1]) {
      boxes[i - 1].focus({ preventScroll: true });
    }
  });
});

03Paste full code across boxes

The motion

A paste event on any of the six boxes is caught before the browser inserts anything, stripped down to digits, and split one character per box.

Paste full code across boxes
Open in a new tab

03 · Paste full code across boxes — Measured area 0.432% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

clipboard6칸 분배숫자 외 무시

Good places for it

That's what turns a code copied out of a mail app into a filled row in one motion. Without it, a single digit would land in a field capped at a maxlength of 1 instead of the whole code.

box.addEventListener('paste', function (e) {
  var text = (e.clipboardData || window.clipboardData)
    .getData('text').replace(/[^0-9]/g, '');
  if (!text) return;
  e.preventDefault();
  text.slice(0, 6).split('').forEach(function (ch, k) {
    if (boxes[k]) boxes[k].value = ch;
  });
  (boxes[Math.min(text.length, 6) - 1] || boxes[0]).focus({ preventScroll: true });
});

04Force numeric mobile keypad

What it does

On a phone, inputmode="numeric" paired with pattern="[0-9]*" opens the number pad instead of the full keyboard, without changing the input's underlying type, which stays text.

Force numeric mobile keypad
Open in a new tab

04 · Force numeric mobile keypad — Measured area 0.8% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

inputmode numericpattern [0-9]*텐키

When to use it

Both attributes matter together — drop the pattern and some browsers fall back to a keyboard with letters one tap away.

<input
  type="text"
  inputmode="numeric"
  pattern="[0-9]*"
  maxlength="1"
  autocomplete="one-time-code"
  aria-label="Verification code, digit 1"
>

05Masked digit toggle

What you see

Tapping the eye button flips every box between type="password" and type="text" at once, turning a row of dots into the digits themselves and back again on a second tap.

Masked digit toggle
Open in a new tab

05 · Masked digit toggle — Measured area 0.702% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

마스킹토글점 대체

Where it fits

It behaves the way a banking app's account PIN field does, where digits stay hidden by default but a viewer can confirm what they actually typed.

var masked = true;
toggle.addEventListener('click', function () {
  masked = !masked;
  boxes.forEach(function (box) {
    box.type = masked ? 'password' : 'text';
  });
  toggle.setAttribute('aria-pressed', String(!masked));
});

06Shake and clear on error

The motion

Clicking confirm compares the six digits against the expected code, and a mismatch adds a class that shakes the row while a status message announces the failure.

Shake and clear on error
Open in a new tab

06 · Shake and clear on error — Measured area 5.167% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

흔들림 300ms자동 비움빨간 테두리

Good places for it

Once that shake animation ends, the boxes clear themselves and focus returns to the first one. The reset only runs after animationend fires, so the shake and the clearing never land on the same frame.

confirmBtn.addEventListener('click', function () {
  var code = boxes.map(function (box) { return box.value; }).join('');
  if (code.length < 6 || code !== '123456') {
    pin.classList.add('is-error');
    pin.addEventListener('animationend', function clear() {
      pin.classList.remove('is-error');
      boxes.forEach(function (box) { box.value = ''; });
      boxes[0].focus({ preventScroll: true });
      pin.removeEventListener('animationend', clear);
    });
  }
});

07Resend countdown timer

What it does

The resend button starts disabled with a 60-second count spelled out in its own label.

Resend countdown timer
Open in a new tab

07 · Resend countdown timer — Measured area 1.097% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

60초비활성카운트다운

When to use it

A setTimeout loop then ticks that number down once a second until it hits zero and re-enables the button. Clicking resend while the timer is still running does nothing, because the disabled attribute is what actually blocks the click, not just its faded appearance.

var left = 60;
function tick() {
  resend.textContent = left > 0 ? 'Resend in ' + left + 's' : 'Resend';
  resend.disabled = left > 0;
  if (left > 0) {
    left--;
    setTimeout(tick, 1000);
  }
}

08SMS OTP autofill

What you see

Every one of the six boxes carries autocomplete="one-time-code", not only the first one, because iOS and Android don't know ahead of time which box will be focused once the SMS code becomes available for autofill.

SMS OTP autofill
Open in a new tab

08 · SMS OTP autofill — Measured area 0.749% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

autocompleteone-time-codeOS 감지

Where it fits

Once the OS drops the code in, it lands through the same input event — or the same paste path used for a manual paste — that already sanitizes and distributes it across the row.

<input maxlength="1" autocomplete="one-time-code">
<input maxlength="1" autocomplete="one-time-code">
<input maxlength="1" autocomplete="one-time-code">
<input maxlength="1" autocomplete="one-time-code">
<input maxlength="1" autocomplete="one-time-code">
<input maxlength="1" autocomplete="one-time-code">

09Static focus for reduced motion

The motion

With prefers-reduced-motion set to reduce, the caret that normally slides across the row and the ghost digits that fade in one at a time both turn off.

Static focus for reduced motion
Open in a new tab

09 · Static focus for reduced motion — Measured area 1.001% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

prefers-reduced-motion즉시 이동정적 포커스

Good places for it

Focus then jumps straight to the next box the instant a digit lands. It's the same auto-advance from Item 01, just stripped of every transition that isn't the focus change itself.

@media (prefers-reduced-motion: reduce) {
  .pin__ghost, .pin__caret, .pin__signal, .pin__row, .pin__input {
    animation: none !important;
    transition: none !important;
  }
  .pin.is-demo .pin__ghost { opacity: 1; }
}

Where it breaks — the traps

Paste and SMS share one path

The two demos that quietly depend on the same handful of lines are Items 03 and 08. Neither a browser's clipboard nor a phone's SMS-reading layer delivers a code as six separate keystrokes; both drop the whole string into whichever single box currently has focus. A plain maxlength of 1 would also clip that string down to its first character. Skip the paste listener on any one of the six boxes — not only the first. Both a manual paste and an OS autofill then degrade to one stray digit sitting in that box while the rest stay empty. Neither iOS nor Android promises which box will be focused when the code arrives. Every fix already sits inside the nine demos above, and the whole set — vanilla markup and React versions alike, with nothing extra to install — is worth pulling from the archive instead of retyping nine event handlers by hand; unzip it with 39kzjrs9 typed exactly as it reads in this sentence, no extra spaces added. Where the input splits into choices rather than digits, the segmented control UI patterns answer the same slot differently.

Accessibility

Reduced motion

None of the nine ignore prefers-reduced-motion, but each drops a different piece of motion rather than freezing solid. Items 01, 02, 04, and 09 lose the sliding caret and the one-by-one ghost fade. The six digits that would normally flash in sequence show up at once instead. Focus then jumps to the next box with no transition at all — exactly what Item 09 exists to demonstrate on its own. Item 05's dot-to-digit blink stops entirely and settles on the plain digit rather than the dot. Item 06 loses its shake, so a wrong code is reported through the status text and a static red icon instead of motion. Item 07's countdown numbers and resend button stop animating in and simply reflect whatever state they're already in. MDN documents prefers-reduced-motion and the operating-system settings that switch it on, and all nine SCSS files share the same media query rather than shipping nine different ones.

More otp enter ui patterns and the rest of the input-pattern collection live under the UI category hub, and what this site actually sells — and doesn't — is explained on the about page.

FAQ

Does autocomplete="one-time-code" work the same in every browser?

Mostly, but not identically. MDN's autocomplete reference documents one-time-code as the token that lets a browser or the OS's SMS-reading layer offer to fill a field with an incoming code. Both Safari on iOS and Chrome on Android honor it, though the autofill UI itself — a QuickType suggestion bar versus a keyboard-adjacent chip — differs between them. Set the attribute on every box in a split layout, not only the first, since neither OS guarantees which box will be focused when the code arrives. When the step before this one asks for an ID photo, the identity verification screen patterns cover that card.

Do I need both inputmode="numeric" and pattern="[0-9]*" on every box?

Yes, for two different reasons. The inputmode="numeric" attribute is what tells a mobile browser to show the number pad instead of the full keyboard. The pattern="[0-9]*" attribute is an older iOS-specific check that Safari still looks for before it commits to that numeric layout. Dropping either one can bring letters back within a tap of the code. Neither attribute changes what actually gets accepted — the input event handler still has to strip non-digits itself.

Does an otp input ui design need a framework or a component library?

No. Each of the nine compiles from plain SCSS variables into ordinary CSS plus a small vanilla script with no build step. Any one of them drops into a static page as is. The zip's react/ folder wraps the same nine behaviors as typed components for a project that already runs React. Each component takes props for the box count, the completion callback, and the accent color in place of hand-edited class names.

Enter the archive password

The password is inside this article. You will find it as you read.