OTP Input

"use client";

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@dashboardpack/core/components/ui/input-otp";
import { useState } from "react";
import { REGEXP_ONLY_DIGITS } from "input-otp";

export default function InputOtpExample() {
  const [code, setCode] = useState("");
  return (
    <div className="space-y-4">
      <p id="otp-label" className="text-sm font-medium">
        Verification code
      </p>
      <InputOTP
        maxLength={6}
        pattern={REGEXP_ONLY_DIGITS}
        value={code}
        onChange={setCode}
        aria-labelledby="otp-label"
      >
        <InputOTPGroup>
          {[0, 1, 2].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          {[3, 4, 5].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <p className="text-xs text-muted-foreground">
        {code.length === 6
          ? "Code entered. Connect a backend to verify it."
          : "Enter or paste a six-digit code."}
      </p>
    </div>
  );
}