Otp Input

Forms 5

About

otp input right and wrong UI

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Otp Input to your project and fits it to your theme.

Code

How Otp Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { OTPInput } from "@/components/ui/otp-input"
import { useState } from "react"

export default function OTPInputDemo() {
  const [value, setValue] = useState("")
  const isValid = value.length === 6 && value === "123456"
  const isError = value.length === 6 && !isValid

  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <div className="text-center space-y-4">
        <p className="text-sm text-muted-foreground">
          Enter code{" "}
          <span className="font-mono font-bold text-foreground">123456</span>
        </p>
        <OTPInput value={value} onChange={setValue} isError={isError} isValid={isValid} />
        <p className="text-xs text-muted-foreground h-4">
          {isValid ? "✓ Correct" : isError ? "✗ Incorrect code" : ""}
        </p>
      </div>
    </div>
  )
}