Animated OTP Input

A one-time-code field. Each cell's digit flips in on rotateY with a small scale and vertical offset, the filled cell settles at scale(1.05), and a blinking caret marks the focused empty cell. Group separators are drawn every three cells, so a six-digit code reads as two groups of three.

Underneath is a real UPinInput with its text, caret, background and shadow all made transparent. The visible cells are a painted overlay positioned on top, so the digits you see are not the digits the inputs hold.

When every cell is filled the component emits complete and flashes its successColor as a boxShadow around the whole field for 1500ms.

Usage

Bind v-model to the digit string and listen for complete. length is the number of cells. Paste works: non-digits are stripped before they reach state.

<template>
  <div class="flex w-full max-w-md flex-col gap-5">
    <div class="flex flex-col gap-2">
      <p class="text-sm font-medium text-highlighted">
        Verification code
      </p>
      <MAnimatedOTPInput
        v-model="code"
        :length="6"
        @complete="onComplete"
      />
    </div>

    <div class="flex items-center gap-3">
      <UButton
        size="sm"
        label="Autofill"
        icon="i-lucide-wand-sparkles"
        @click="code = '424242'"
      />
      <UButton
        size="sm"
        label="Clear"
        variant="outline"
        color="neutral"
        @click="code = ''"
      />
      <span class="text-xs text-muted">{{ status }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const code = ref('')
const status = ref('Waiting for 6 digits')

function onComplete(value: string) {
  status.value = `Complete: ${value}`
}
</script>

Customize

Props

Events

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.animatedOTPInput in app.config.ts.

Accessibility

Every cell is a real, focusable input from Reka UI's PinInput, so digit entry, arrow movement between cells and Backspace all behave natively, and disabled blocks them properly. The component does not add ARIA of its own — and it depends on Reka UI's per-cell aria-label of pin input N, both to find the focused cell and as the input's accessible name.

There is one duplication to be aware of. Unlike the number input, the painted overlay is not aria-hidden; it is only pointer-events-none, which stops the pointer but leaves it in the accessibility tree. A filled code is therefore exposed twice — once by the inputs and once by the overlay spans. If the exact announcement matters, set the field inside a container you can mark aria-hidden, or read the value from your own v-model.

Focus is still visible: the focused empty cell gains border-primary and a 3px primary ring. Under prefers-reduced-motion that ring is the only cue for a focused empty cell, because the blinking caret is not rendered at all.

Performance

• The real inputs are stripped of color, caret-color, background, box-shadow and outline by a scoped :deep() rule, and the visible digit is a separate AnimatePresence span. Typing therefore never reflows the painted cell, and the input's own text layer costs nothing to update.
• Focus tracking is delegated to the wrapper: one focusin and one focusout, each doing a single querySelectorAll('input[aria-label^="pin input"]') and an indexOf(document.activeElement) — not a listener or an index per cell.
• sanitize strips non-digits and right-trims empty trailing cells before they reach state, so pasting 12-34 56 completes normally and a short paste never leaves a gap in the middle of the array.
• Cell entrances are staggered by index * 50ms, computed arithmetically in the transition rather than by nested timers.
• The success glow is a single boxShadow animation on the root element, held for 1500ms by one setTimeout. That timeout is not cancelled on unmount.
• The caret is one motion.span running a 1s infinite opacity keyframe, mounted only while an empty cell is focused, and not rendered at all under reduced motion.
• No ResizeObserver, no MutationObserver, no layout reads.