# Digit Entry
## 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.
{% embed url="" %}
## 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.
