OTP

OTP

OTP (One-Time Password) provides a secure input dialog for collecting authentication codes with automatic countdown timer and resend functionality.

Visual Specifications

Property	Value
OTP Digits	4-6 (configurable)
Input Box	40-48px square
Spacing	8-12px between boxes
Font	Large, monospace
Timer Duration	30-60 seconds (configurable)

States

Empty Incomplete Complete Error

Empty input boxes, waiting for user input

Partially filled, submit button disabled

All filled, submit button enabled

Red borders, error message shown

Number Masking

Phone number displayed with masked middle digits:

Original	Displayed
08123456789	081****6789
628123456789	628****56789

Countdown Timer States

Phase	Appearance
Active	”Resend in 30s”
Finished	”Resend OTP” (clickable)
Disabled	Greyed out during countdown

Usage Guidance

When to use

• Two-factor authentication flows
• Phone number verification
• Transaction confirmation
• Secure code entry

Best practices

✅ Do	❌ Don’t
Show masked phone for context	Make countdown too short (< 30s)
Display clear error messages	Clear code on error
Handle network errors gracefully	Hide timer from user
Provide reasonable countdown duration	Skip resend functionality

Error Messages

Error	Message
Wrong code	”Invalid OTP. Please try again.”
Expired	”OTP has expired. Please request a new one.”
Network error	”Connection error. Please try again.”