Enter the code we sent to you@example.com

Try 123456 · anything else fails

Controls

variant

length

masked

pattern

successColor

errorColor

resetOnErrorcollapseOnSuccess

OTP Input

Verification code input with springy digits, a gliding focus ring and animated success and error states.

$ pnpm dlx shadcn@latest add @tweenly/otp-input

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

export function Demo() {
  return (
    <OtpInput verify={(code) => code === "123456"} />
  )
}

Updates live as you change the controls. Only non-default props are included.