OTP Code
One-time password verification with auto-focus, keyboard navigation, and resend cooldown timer. Features animated input fields with glow effects and focus states.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | "Verify Identity" | Title text displayed at the top of the form. |
| subtitle | string | "Enter the 4-digit code sent to your device." | Subtitle text displayed below the title. |
| length | number | 4 | Number of OTP code digits. |
| onComplete | (code: string) => void | undefined | Callback function called when OTP code is complete. |
| onResend | () => void | undefined | Callback function called when resend button is clicked. |
| resendCooldown | number | 30 | Cooldown time in seconds before resend is allowed. |
| className | string | undefined | Additional CSS classes for custom styling. |
| autoFocus | boolean | true | Whether to automatically focus the first input field. |
When to Use
Perfect for security tools, banking apps, and Next.js platforms that require 2FA or device verification. Use this React component for an OTP (One-Time Password) experience with auto-focus inputs and technical glow effects.
Best Practices
Follow React best practices by managed the keyboard focus flow across inputs. Maintain scalable component architecture by keeping the code length configurable. Optimize for performance by managed the resend timer efficiently.
Why This Component Matters
Smooth OTP flows reduce user drop-off during sensitive verification steps. This production-ready UI component helpsคุณ build an interface that feels precise and secure, improving the overall reliability of your authentication process.
FAQ
QDoes it auto-focus?
Yes, the component automatically focuses the first digit field on mount and moves the cursor forward as the user types or pastes the code.
QCan I use 6 digits?
The `length` prop defaults to 4 but can be set to 6 or any other number to match your platform's security requirements.
QWhat is the resend cooldown?
The `resendCooldown` prop (default 30s) prevents spam by disabling the resend button until the countdown reaches zero.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.