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

1. 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.

2. 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

Size	Digit (px)	Corner (px)	Container Height (px)
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.