Input OTP

function InputOTPDemo() {
  const [otp, setOtp] = useState("");

  return (
    <div className="flex flex-col gap-4">
      <InputOTP maxLength={6} value={otp} onChange={setOtp}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      {otp.length === 6 ? (
        <Badge variant="success">
          <Check aria-hidden="true" />
          Code complete
        </Badge>
      ) : (
        <p className="text-xs text-fg-tertiary">Entered {otp.length} of 6 digits.</p>
      )}
    </div>
  );
}