rallly/apps/web/src/components/input-otp.tsx
2025-01-21 18:07:13 +00:00

30 lines
658 B
TypeScript

import { Input } from "@rallly/ui/input";
import React from "react";
const InputOTP = React.forwardRef<
HTMLInputElement,
React.ComponentProps<typeof Input> & { onValidCode?: (code: string) => void }
>(({ onValidCode, onChange, ...rest }, ref) => {
return (
<Input
ref={ref}
{...rest}
onChange={(e) => {
onChange?.(e);
if (e.target.value.length === 6) {
onValidCode?.(e.target.value);
}
}}
maxLength={6}
data-1p-ignore
inputMode="numeric"
autoComplete="one-time-code"
pattern="\d{6}"
/>
);
});
InputOTP.displayName = "InputOTP";
export { InputOTP };