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.
Main Features of OTP Code
How to Use OTP Code in Next.js
Installation Guide for OTP Code
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.