OTP Input

import { OtpInput } from "@/components/ui/OtpInput";

export default function BasicOtpExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <OtpInput maxLength={6}>
        <OtpInput.Group>
          <OtpInput.Slot index={0} />
          <OtpInput.Slot index={1} />
          <OtpInput.Slot index={2} />
        </OtpInput.Group>
        <OtpInput.Separator />
        <OtpInput.Group>
          <OtpInput.Slot index={3} />
          <OtpInput.Slot index={4} />
          <OtpInput.Slot index={5} />
        </OtpInput.Group>
      </OtpInput>
      <p className="text-sm text-muted-foreground">
        Enter the 6-digit code sent to your device
      </p>
    </div>
  );
}

import { OtpInput } from "@/components/ui/OtpInput";

export default function PatternOtpExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <OtpInput maxLength={4}>
        <OtpInput.Group>
          <OtpInput.Slot index={0} />
          <OtpInput.Slot index={1} />
          <OtpInput.Slot index={2} />
          <OtpInput.Slot index={3} />
        </OtpInput.Group>
      </OtpInput>
      <p className="text-sm text-muted-foreground">
        Enter your 4-digit PIN
      </p>
    </div>
  );
}

"use client";

import { useState } from "react";
import { OtpInput } from "@/components/ui/OtpInput";

export default function ControlledOtpExample() {
  const [value, setValue] = useState("");

  const handleSubmit = () => {
    if (value.length === 6) {
      console.log("Submitted:", value);
      alert(`Code submitted: ${value}`);
    }
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <OtpInput 
        maxLength={6} 
        value={value} 
        onChange={setValue}
      >
        <OtpInput.Group>
          <OtpInput.Slot index={0} />
          <OtpInput.Slot index={1} />
          <OtpInput.Slot index={2} />
        </OtpInput.Group>
        <OtpInput.Separator />
        <OtpInput.Group>
          <OtpInput.Slot index={3} />
          <OtpInput.Slot index={4} />
          <OtpInput.Slot index={5} />
        </OtpInput.Group>
      </OtpInput>
      
      <div className="flex flex-col items-center gap-2">
        <p className="text-sm text-muted-foreground">
          Current value: <span className="font-mono">{value || "(empty)"}</span>
        </p>
        <button
          onClick={handleSubmit}
          disabled={value.length !== 6}
          className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          Verify Code
        </button>
      </div>
    </div>
  );
}

import { OtpInput } from "@/components/ui/OtpInput";

export default function AlphanumericExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <OtpInput maxLength={6} pattern={/^[A-Z0-9]$/i}>
        <OtpInput.Group>
          <OtpInput.Slot index={0} />
          <OtpInput.Slot index={1} />
          <OtpInput.Slot index={2} />
          <OtpInput.Slot index={3} />
          <OtpInput.Slot index={4} />
          <OtpInput.Slot index={5} />
        </OtpInput.Group>
      </OtpInput>
      <p className="text-sm text-muted-foreground">
        Enter alphanumeric code (A-Z, 0-9)
      </p>
    </div>
  );
}