OTPInput Component

6-digit OTP input with auto-focus and validation. Handles OTP verification and resend functionality.

Basic OTP Input

<OTPInput 
  email="user@example.com"
  onSubmit={(otp) => console.log('OTP submitted:', otp)}
  onResend={() => console.log('OTP resend requested')}
/>

With Error State

Invalid OTP code

<OTPInput 
  email="user@example.com"
  error="Invalid OTP code"
  onSubmit={(otp) => console.log('OTP submitted:', otp)}
  onResend={() => console.log('OTP resend requested')}
/>

Loading State

<OTPInput 
  email="user@example.com"
  loading={true}
  onSubmit={(otp) => console.log('OTP submitted:', otp)}
  onResend={() => console.log('OTP resend requested')}
/>

Props Reference

Prop	Type	Default	Description
onSubmit	(otp: string) => void	required	OTP submission callback
onResend	() => void	required	Resend OTP callback
email	string	required	Email address for display
loading	boolean	false	Loading state
error	string	undefined	Error message
className	string	undefined	Additional CSS classes