Gallery
See what others have created
martinskalik
@martinskalik
Digit entry views
Design the digit entry view for fixed-length inputs like PINs, verification codes, or secure numeric confirmation. The component should work as a single task-focused field made of discrete slots, not a generic text input. Show how it behaves when empty, when one or more digits are entered, and when the full code is complete.
Make the interaction clear at every step: visible focus on the current slot, automatic advance on input, obvious backspace behavior, and a filled state that still lets the user confirm what they entered. If the digits are masked, show the replacement pattern and timing so the user can still track progress without exposing the value.
Include the surrounding controls that make the flow usable on mobile: numeric keyboard treatment, paste or auto-fill support if applicable, and a resend or alternate method link when the code is not available. The layout should keep the entry area centered and easy to reach with one hand.
Add error and recovery states for invalid, expired, or incomplete input. The message should explain what failed and what to do next, without clearing the user’s progress unless the flow requires it.
What to deliver
- Design a digit entry row with fixed-length slots and clear focus state
- Show the active entry state, filled state, and masked state
- Add backspace, clear, and resend/alternate input affordances where relevant
- Include error, retry, and success states for the full flow
- Show mobile keyboard behavior and spacing for one-handed use
Animate the transition between active digit fields to guide users with a clear path and make input feel fluid and engaging.