One-time code input

<form class="otp-form" novalidate>
  <label class="otp-label" id="otp-label">Enter the 6-digit code</label>
  <div class="otp" role="group" aria-labelledby="otp-label">
    <input class="otp-box" inputmode="numeric" autocomplete="one-time-code" maxlength="6" aria-label="Digit 1">
    <input class="otp-box" inputmode="numeric" maxlength="1" aria-label="Digit 2">
    <input class="otp-box" inputmode="numeric" maxlength="1" aria-label="Digit 3">
    <input class="otp-box" inputmode="numeric" maxlength="1" aria-label="Digit 4">
    <input class="otp-box" inputmode="numeric" maxlength="1" aria-label="Digit 5">
    <input class="otp-box" inputmode="numeric" maxlength="1" aria-label="Digit 6">
  </div>
  <p class="otp-result" role="status">Try typing, or paste 123456.</p>
</form>

.otp-form { display: grid; justify-items: center; gap: 12px; font: 14px system-ui, sans-serif; }
.otp-label { font-weight: 600; }
.otp { display: flex; gap: 8px; }

.otp-box {
  width: 46px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  text-align: center;
  font: 600 22px ui-monospace, Menlo, monospace;
  color: var(--fg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  caret-color: var(--brand);
  transition: box-shadow 0.15s;
}
.otp-box:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.otp.complete .otp-box { box-shadow: inset 0 0 0 1px #12a150; }
.otp-result { margin: 0; min-height: 1.4em; color: var(--muted); }

@media (max-width: 400px) { .otp-box { width: 40px; height: 48px; font-size: 19px; } }

// One-time code input: six single-digit boxes that behave like one field.

const boxes = [...document.querySelectorAll('.otp-box')];
const group = document.querySelector('.otp');
const result = document.querySelector('.otp-result');

const onlyDigits = (text) => text.replace(/\D/g, '');

// Spread a string of digits across the boxes, starting at `startIndex`.
// Used for typing, paste and SMS autofill (which drops the whole code into one box).
function fillFrom(startIndex, digits) {
  [...digits].slice(0, boxes.length - startIndex).forEach((digit, offset) => {
    boxes[startIndex + offset].value = digit;
  });
  const nextEmpty = boxes.findIndex((box) => !box.value);
  (boxes[nextEmpty] ?? boxes[boxes.length - 1]).focus();
  checkComplete();
}

function checkComplete() {
  const code = boxes.map((box) => box.value).join('');
  const isComplete = code.length === boxes.length;
  group.classList.toggle('complete', isComplete);
  result.textContent = isComplete ? `Code entered: ${code}` : 'Try typing, or paste 123456.';
  // In a real form, submit here when complete.
}

boxes.forEach((box, index) => {
  box.addEventListener('input', () => {
    const digits = onlyDigits(box.value);
    box.value = '';
    if (digits) fillFrom(index, digits);
    else checkComplete();
  });

  box.addEventListener('keydown', (event) => {
    if (event.key === 'Backspace' && !box.value && index > 0) {
      // Empty box: Backspace jumps back and clears the previous digit.
      boxes[index - 1].value = '';
      boxes[index - 1].focus();
      event.preventDefault();
      checkComplete();
    } else if (event.key === 'ArrowLeft' && index > 0) {
      boxes[index - 1].focus();
    } else if (event.key === 'ArrowRight' && index < boxes.length - 1) {
      boxes[index + 1].focus();
    }
  });

  box.addEventListener('paste', (event) => {
    event.preventDefault();
    fillFrom(index, onlyDigits(event.clipboardData.getData('text')));
  });

  box.addEventListener('focus', () => box.select()); // retyping a box replaces its digit
});