Components
Pin Input
Component it is commonly used to input secure authentication or verification
Selected Theme
Select brand or tribe name to preview style
Anatomy
The Pin Input component typically consists of a series of input fields, each representing a single digit of the PIN. The fields are arranged horizontally or vertically, depending on the design. Each input field is usually represented by a box or a circle where users can enter a digit.
- Input Fields: Individual input fields where users enter digits of the PIN.
- Security Masking: The ability to hide or mask the entered digits, typically with asterisks (*).
- Error Indicators: Visual cues to highlight input errors, such as red borders or error messages.
Usage
Pin input components can be used in a variety of contexts, such as:
- Login forms
- Two-factor authentication screens
- OTP verification screens
- Credit card PIN entry screens
When to use
- When you need to collect a short sequence of digits from a user, such as for authentication or authorization purposes.
- When you need to protect the user's privacy and security by hiding their PIN as they are entering it.
When not to use
- When you need to collect a long sequence of digits from a user, such as a phone number or social security number.
- When you need to collect alphanumeric characters from a user.
Do
Limit the Pin Input to 6 digits to mitigate cognitive biases related to memory and recall.
Don't
Too much digits will make user have too much cognitive load.
Accessibility
To ensure that the Pin Input component is accessible to all users, consider the following guidelines:
- Make sure that the pin input component fully navigable and operable using a keyboard.
- Ensure screen readers can interpret and announce the input fields and errors accurately.
- Maintain a clear focus indicator for each input field to help keyboard users.
- Provide proper ARIA labels to assist screen reader users in understanding the purpose of the Pin Input.
Do
Prioritize user data security by masking the entered digits to prevent onlookers from accessing sensitive information.
Don't
Never display the entered digits in plaintext; always mask or hide them for security.
Do
Visual cues to highlight input errors, such as red borders or error messages.
Don't
No visual cues to highlight input errors
Content
When integrating the Pin Input component, consider the following content guidelines:
- Clear and concise label or title to provide context for the Pin Input.
- Placeholders in the input fields to indicate the expected format, e.g., “Enter your 6-digit PIN.”
- Clear and informative error messages that guide users in resolving issues.
- Secure masked to protect user input.
Do
Provide clear feedback on the number of incorrect digits entered
Don't
Avoid fot not using any feedback at all regarding digit input errors