InputOTP (ui/input-otp.tsx)

Secure two-factor authentication input with visual caret and validation states

// Source: https://github.com/janhesters/react-router-saas-template | License: MIT | Copyright 2025 Jan Hesters
// Provided via justclaw.it.com; keep this notice with the code.
import { IconMinus } from "@tabler/icons-react";
import { OTPInput, OTPInputContext } from "input-otp";
import * as React from "react";

import { cn } from "~/lib/utils";

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string;
}) {
  return (
    <OTPInput
      className={cn("disabled:cursor-not-allowed", className)}
      containerClassName={cn(
        "flex items-center has-disabled:opacity-50",
        containerClassName,
      )}
      data-slot="input-otp"
      spellCheck={false}
      {...props}
    />
  );
}

function In

... (truncated -- full source via MCP)