Digit Entry
Digit entry components are used for entering individual digits in a sequential manner, typically for purposes like PIN input or verification codes.
Overview
Ideal for use cases requiring a set number of digits, the digit entry component simplifies data input by providing a clear and structured approach.
When to use
Use when users need to enter short, sequential numbers, such as a 4-6 digit PIN or verification code during authentication processes.
Use in scenarios where accuracy in number input is essential, such as during account recovery, login, or making secure transactions.
Helpful when asking users to input a short number or code, especially on mobile devices, where larger forms are inconvenient.
When not to use
Avoid using for entering long strings of numbers like phone numbers or account numbers, where a standard input field may be more practical.
Do not use for any input requiring letters or special characters, as this component is designed strictly for digits.
This component is not suitable for editing large numbers or when users may need to go back and forth between digits without a guided structure.
Avoid if users need flexibility to input numbers freely, like in a calculator or a payment amount field.
Types
Anatomy
Container: A box that holds the entire digit entry fields, ensuring consistent spacing and layout. It provides a boundary that organizes the individual fields visually.
Digit Entry: Individual fields for each digit input. Each field accepts a single digit and typically auto-focuses to the next field after input.
Styles
States
Size
Small
14
8
32
Medium
18
8
42
Large
22
8
50
Accessibility
Keyboard Navigation: Users must be able to navigate between digit fields using the keyboard. Use clear focus states to indicate which digit field is active.
Screen Reader Support: Each digit entry field should be announced clearly, specifying the number of digits needed for full completion.
Error Messaging: If users enter an incorrect digit or code, ensure accessible error messages with appropriate visual indicators like red borders and error descriptions.
Auto-focus and Auto-tab: To enhance accessibility, each field should automatically advance to the next one after a digit is entered, reducing the need for additional keypresses.
Example
Mobile Number PIN Input: When users log in using a one-time PIN sent to their phone.
ATM or Payment Systems: For users to securely input their 4-6 digit PIN for transactions.
Account Recovery: When a user is resetting a password, they may need to input a verification code sent via email or SMS.
Lock Screens on Devices: To unlock mobile devices or apps, users can enter their chosen PIN using a digit entry component.
Last updated