OtpInput

Install

npx stylesheet-ui add otp-input

Usage

Controlled segmented input. onComplete fires once length digits are entered — use it to trigger verification automatically. Shared by email verification (SignUpForm) and password reset (NewPasswordForm).

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

const [code, setCode] = useState("");

<OtpInput
  value={code}
  onChange={setCode}
  length={6}
  onComplete={(value) => verify(value)}
  autoFocus
/>

Resend

Pass onResend to show a “Resend code” action. It starts disabled with a countdown (resendSeconds, default 30) and becomes tappable when the timer hits zero; tapping it calls onResend and restarts the countdown.

<OtpInput
  value={code}
  onChange={setCode}
  onResend={() => resendCode()} // your auth provider
  resendSeconds={30}
/>