OTP Verification
A user-friendly OTP verification component with auto-focus, paste detection, and resend timer
Zezo OTP Verify Component
Verify Your Number
Code sent to +91 8797653552
Resend code in 120s
📦 Installation
💡 Usage Example
import OtpVerify from "@/components/zezo/auth/OtpInput";
<OtpVerify
countryCode="+91"
phoneNumber="9876543210"
onSubmit={(otp) => {
console.log("OTP:", otp);
// Verify OTP with your API
}}
isLoading={false}
error=""
/>📘 Props
| Prop | Type | Required | Description |
|---|---|---|---|
| countryCode | string | Yes | Country code to display (e.g. "+91") |
| phoneNumber | string | Yes | Phone number displayed in subtitle |
| onSubmit | (otp: string) => void | Optional | Callback function called when OTP is submitted (all fields filled) |
| isLoading | boolean | Optional | Loading state for verify button (default: false) |
| goBack | () => void | Optional | Callback for back navigation (shows back button) |
| error | string | Optional | Error message displayed in red below OTP fields |
| otpLength | number | Optional | Number of OTP digits (default: 4) |
| resetTime | number | Optional | Countdown time in seconds before resend enabled (default: 120) |
| title | string | Optional | Main heading text (default: "Verify Your Number") |
| subtitle | string | Optional | Subtitle text (default: "Code sent to [countryCode] [phoneNumber]") |
| logoUrl | string | Optional | Logo image URL displayed at top (has default) |
| backgroundImageUrl | string | Optional | Right side background image URL (hidden on mobile, has default) |
| backgroundColor | string | Optional | Custom background color (overrides theme) |
✨ Features
🔢 OTP Input
Multi-digit OTP input with separate fields
⚡ Auto-Focus
Automatically moves to next field on input
📋 Paste Detection
Supports pasting OTP from clipboard
⌨️ Keyboard Navigation
Backspace moves to previous field
⏱️ Resend Timer
Countdown timer before resend is enabled
🔄 Resend Code
Resend button appears after timer expires
🔙 Back Navigation
Optional back button with callback
🎨 Customizable Branding
Logo, title, subtitle, and background image
🌓 Dark Mode
Automatic theme support
⚡ Loading States
Built-in loading and error handling
📱 Responsive
Mobile-first responsive design
🎯 Theme Colors
Integrates with dynamic theme colors