BeUI OTP Input

Forms 169

About

This is OTP Input component

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { OTPInput, type OTPStatus } from "@/components/ui/be-ui-otp-input";

const CODE = "123456";

export default function OTPInputPreview() {
  const [value, setValue] = useState("");
  const [status, setStatus] = useState<OTPStatus>("idle");

  return (
    <div className="flex flex-col items-center gap-4">
      <OTPInput
        label="Verification code"
        hint={`Enter ${CODE} to verify.`}
        successMessage="Verified."
        errorMessage="Wrong code, try again."
        value={value}
        status={status}
        onChange={(v) => {
          setValue(v);
          if (status !== "idle") setStatus("idle");
        }}
        onComplete={(v) => setStatus(v === CODE ? "success" : "error")}
      />
    </div>
  );
}