OTP Input

Gliding focus ring, rolling digits, shake on error, paste support.

Try 123456, or any other code to see an error.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/otp-input.json

Manual

Install the dependencies
npm install clsx motion tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Add the theme tokens

This component uses --success and --success-foreground, which shadcn does not define by default. Add them to your global CSS:

app/globals.css

:root {
  --success: #15803d;
  --success-foreground: #ffffff;
}

.dark {
  --success: #4ade80;
  --success-foreground: #052e16;
}

@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
}

Copy the source

components/ui/otp-input/otp-input.tsx

"use client";

import { Fragment, useEffect, useId, useState, type ChangeEvent, type ComponentProps, type SyntheticEvent } from "react";
import { AnimatePresence, LayoutGroup, motion, useAnimate, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { duration, ease, spring } from "@/lib/motion";

export interface OtpInputProps
  extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "maxLength" | "size" | "type"> {
  /** Number of characters in the code. @default 6 */
  length?: number;
  /** Controlled code. */
  value?: string;
  /** Initial code when uncontrolled. @default "" */
  defaultValue?: string;
  /** Called with the code on every change. */
  onValueChange?: (value: string) => void;
  /** Called once every slot is filled. */
  onComplete?: (value: string) => void;
  /** Result of verifying the code. "error" shakes the slots; "success" draws a check. @default "idle" */
  status?: "idle" | "error" | "success";
  /** Insert a divider after every N slots, e.g. 3 for 123–456. */
  groupSize?: number;
  /** Accept letters as well as digits. Letters are uppercased. @default false */
  alphanumeric?: boolean;
  /** Show dots instead of the characters, for PINs. @default false */
  mask?: boolean;
  /** Classes for the outer wrapper. */
  className?: string;
}

const statusClasses = {
  idle: "border-input",
  error: "border-destructive",
  success: "border-success",
} as const;

/** Blinking caret. Started imperatively so it blinks even in a slot that is active on first render. */
function Caret({ reduceMotion }: { reduceMotion: boolean }) {
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  useEffect(() => {
    if (reduceMotion || !scope.current) return;
    const controls = animate(scope.current, { opacity: [1, 1, 0, 0] }, { duration: 1.1, repeat: Infinity, times: [0, 0.5, 0.5, 1] });
    return () => controls.stop();
  }, [animate, reduceMotion, scope]);
  return <motion.span ref={scope} className="relative h-6 w-px bg-foreground" exit={{ opacity: 0 }} transition={{ duration: 0.1 }} />;
}

export function OtpInput({
  length = 6,
  value,
  defaultValue = "",
  onValueChange,
  onComplete,
  status = "idle",
  groupSize,
  alphanumeric = false,
  mask = false,
  className,
  disabled,
  onFocus,
  onBlur,
  onSelect,
  "aria-label": ariaLabel,
  ...props
}: OtpInputProps) {
  const [internal, setInternal] = useState(defaultValue);
  const code = (value ?? internal).slice(0, length);
  const [focused, setFocused] = useState(false);
  const [scope, animate] = useAnimate<HTMLDivElement>();
  const reduceMotion = useReducedMotion();
  const ringId = useId();

  useEffect(() => {
    if (status === "error" && !reduceMotion && scope.current) {
      animate(scope.current, { x: [0, -8, 8, -6, 6, -3, 0] }, { duration: 0.45, ease: ease.out });
    }
  }, [status, reduceMotion, animate, scope]);

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const pattern = alphanumeric ? /[^a-z0-9]/gi : /\D/g;
    const next = event.currentTarget.value.replace(pattern, "").toUpperCase().slice(0, length);
    if (next === code) return;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
    if (next.length === length && code.length < length) onComplete?.(next);
  }

  // Keep the caret at the end, so typing always fills the next slot. Select-all is allowed.
  function pinCaret(event: SyntheticEvent<HTMLInputElement>) {
    const input = event.currentTarget;
    const end = input.value.length;
    const selectAll = input.selectionStart === 0 && input.selectionEnd === end && end > 0;
    if (!selectAll && (input.selectionStart !== end || input.selectionEnd !== end)) input.setSelectionRange(end, end);
  }

  const activeIndex = Math.min(code.length, length - 1);
  const charMotion = reduceMotion
    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
    : {
        initial: { opacity: 0, y: 10, filter: "blur(4px)" },
        animate: { opacity: 1, y: 0, filter: "blur(0px)" },
        exit: { opacity: 0, scale: 0.6, filter: "blur(2px)" },
      };

  return (
    <div ref={scope} className={cn("relative inline-flex items-center", disabled && "opacity-50", className)}>
      <LayoutGroup id={ringId}>
        <div className="flex items-center gap-2" aria-hidden="true">
          {Array.from({ length }, (_, i) => {
            const char = code[i];
            const active = focused && i === activeIndex;
            return (
              <Fragment key={i}>
                {groupSize && i > 0 && i % groupSize === 0 ? (
                  <span className="mx-0.5 h-0.5 w-3 rounded-full bg-border" />
                ) : null}
                <motion.div
                  animate={status === "success" && !reduceMotion ? { scale: [1, 1.08, 1] } : { scale: 1 }}
                  transition={{ duration: 0.35, delay: i * 0.04, ease: ease.out }}
                  className={cn(
                    "relative flex h-11 w-9 items-center justify-center rounded-md border bg-background text-lg font-medium text-foreground shadow-xs transition-colors duration-200 sm:h-14 sm:w-12 sm:text-xl",
                    statusClasses[status],
                  )}
                >
                  {active && status === "idle" ? (
                    <motion.div
                      layoutId="ring"
                      transition={reduceMotion ? { duration: 0 } : spring.snappy}
                      className="absolute -inset-px rounded-md border-2 border-ring ring-3 ring-ring/20"
                    />
                  ) : null}
                  <AnimatePresence mode="popLayout" initial={false}>
                    {char ? (
                      <motion.span
                        key={`${i}:${char}`}
                        variants={charMotion}
                        initial="initial"
                        animate="animate"
                        exit="exit"
                        transition={{ duration: duration.quick, ease: ease.out }}
                        className="relative"
                      >
                        {mask ? <span className="block size-2.5 rounded-full bg-foreground" /> : char}
                      </motion.span>
                    ) : active ? (
                      <Caret key="caret" reduceMotion={!!reduceMotion} />
                    ) : null}
                  </AnimatePresence>
                </motion.div>
              </Fragment>
            );
          })}
        </div>
      </LayoutGroup>

      {/* One real input covers the slots: native typing, paste, autofill and SMS codes all work. */}
      <input
        type="text"
        inputMode={alphanumeric ? "text" : "numeric"}
        autoComplete="one-time-code"
        autoCapitalize={alphanumeric ? "characters" : "off"}
        spellCheck={false}
        // No maxLength: it would truncate pasted codes like "123-456" before the dash is filtered out.
        value={code}
        disabled={disabled}
        aria-label={ariaLabel ?? (props["aria-labelledby"] ? undefined : `${length}-digit code`)}
        aria-invalid={status === "error" || undefined}
        onChange={handleChange}
        onSelect={(event) => {
          onSelect?.(event);
          pinCaret(event);
        }}
        onFocus={(event) => {
          onFocus?.(event);
          setFocused(true);
          pinCaret(event);
        }}
        onBlur={(event) => {
          onBlur?.(event);
          setFocused(false);
        }}
        className="absolute inset-0 h-full w-full cursor-text bg-transparent text-base text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed"
        {...props}
      />

      <AnimatePresence>
        {status === "success" ? (
          <motion.span
            aria-hidden="true"
            initial={reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.4 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0 }}
            transition={reduceMotion ? { duration: duration.quick } : { ...spring.bouncy, delay: length * 0.04 }}
            className="absolute top-1/2 -right-9 flex size-6 -translate-y-1/2 items-center justify-center rounded-full bg-success text-success-foreground"
          >
            <svg viewBox="0 0 24 24" fill="none" className="size-3.5">
              <motion.path
                d="M5 12.5l4.5 4.5L19 7.5"
                stroke="currentColor"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
                initial={{ pathLength: reduceMotion ? 1 : 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: duration.base, ease: ease.out, delay: length * 0.04 + 0.12 }}
              />
            </svg>
          </motion.span>
        ) : null}
      </AnimatePresence>
      <span role="status" className="sr-only">
        {status === "success" ? "Code verified" : status === "error" ? "Incorrect code" : ""}
      </span>
    </div>
  );
}

Usage

import { OtpInput } from "@/components/ui/otp-input/otp-input";

export function VerifyEmail() {
  const [status, setStatus] = useState<"idle" | "error" | "success">("idle");
  return (
    <OtpInput
      groupSize={3}
      status={status}
      onComplete={async (code) => setStatus((await verify(code)) ? "success" : "error")}
    />
  );
}

API reference

Prop	Type	Default	Description
`length`	`number`	`6`	Number of characters in the code.
`value`	`string`	–	Controlled code.
`defaultValue`	`string`	`""`	Initial code when uncontrolled.
`onValueChange`	`(value: string) => void`	–	Called with the code on every change.
`onComplete`	`(value: string) => void`	–	Called once every slot is filled.
`status`	`"idle" \| "error" \| "success"`	`"idle"`	Result of verifying the code. "error" shakes the slots; "success" draws a check.
`groupSize`	`number`	–	Insert a divider after every N slots, e.g. 3 for 123–456.
`alphanumeric`	`boolean`	`false`	Accept letters as well as digits. Letters are uppercased.
`mask`	`boolean`	`false`	Show dots instead of the characters, for PINs.
`className`	`string`	–	Classes for the outer wrapper.

Also accepts every native <input> attribute, including ref and className.

The caret is pinned to the end so every keystroke fills the next slot; Backspace removes from the end.
The success check sits just outside the right edge; leave about 40px of room for it.

Accessibility

A single native input sits under the slots, so screen readers announce one field ("6-digit code" unless you pass aria-label).
autocomplete="one-time-code" lets iOS and Android offer codes from SMS, and paste drops a whole code in at once.
Non-matching characters are filtered, so pasting "123-456" yields 123456.
status="error" sets aria-invalid and a polite status region announces "Incorrect code" or "Code verified".
With reduced motion enabled, characters fade in, the focus ring jumps, the caret stops blinking and there is no shake.

Installation#

CLI

Manual

Install the dependencies