Digit entry
Digit entry is an input pattern designed for entering short numeric sequences, such as verification codes, PINs, or one-time passwords (OTPs). It typically displays separate boxes or fields for each digit.
Philosophy
Digit entry makes entering short, critical numeric codes clear and reliable.
It improves legibility by separating digits.
It helps prevent input errors through strict digit formatting.
It provides a focused, task-specific experience compared to generic text fields.
Anatomy
Variants
Standard
Holding the digits.
States
Idle
Visible but not filled.
Filled
Digit displayed.
Usage tips
Dos
Use digit entry for short numeric inputs like OTPs, PINs, and codes.
Provide clear instructions above the field.
Auto-advance input focus to the next box for smooth flow.
Allow paste functionality for the full code (important for OTPs).
Don’ts
Don’t use digit entry for long numbers (e.g., credit cards — use formatted text fields).
Real-world example
