OTPVerifyForm

An OTP verification form for email verification flows with resend functionality.

Verify Your Email

We sent a verification code to your email address.

Installation

pnpm add @corew500/ui

Usage

import { OTPVerifyForm } from '@corew500/ui/blocks/otp-verify-form'

<OTPVerifyForm
  onFormSubmit={(data) => handleOTP(data)}
  onResend={() => handleResendOTP()}
  email="user@example.com"
  title="Verify Your Email"
  description="We sent a verification code to your email address."
/>

API Reference

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: OTPVerifyFormData) => void	—	Called when the form is submitted
`onResend`	() => void	—	Called when resend is clicked
`loading`	enum	`false`	Whether the form is in a loading state
`success`	enum	`false`	When true, shows success state instead of form
`glow`	enum	`false`	Enable glow effects
`length`	number	`6`	OTP code length
`email`	string	—	Email address for display
`title`	string	`Enter verification code`	—
`description`	string	—	—
`successTitle`	string	`Verified!`	—
`successDescription`	string	`Your code has been verified successfully.`	—
`successAction`	enum	—	—
`buttonLabels`	{ submit?: string; loading?: string; resend?: string; resendCooldown?: string; }	`{}`	—
`errors`	{ code?: string; general?: string; }	`{}`	—
`features`	{ autoSubmit?: boolean; }	`{}`	—
`resendCooldown`	number	`60`	Resend cooldown in seconds