Verification field
A verification field is a user interface element that allows users to enter numeric values.
Structure
Verification fields are typically represented as a rectangle, or smaller text input field.
States
The verification field can appear in various states, which are described as follows:
Default:
Border: 2px, dark gray (#7C7C7C)
Fill: white (#FFFFFF)
Text: copytext gray (#333333)
Hover:
Border: 2px, copytext gray (#333333)
Fill: white (#FFFFFF)
Active:
Border: 2px, light green (#65AC1E)
Fill: white (#FFFFFF)
Text input:
Border: 2px, dark gray (#7C7C7C)
Fill: white (#FFFFFF)
Best practice
The verification field in the GROW design system is used to verify a user's identity. A one-time code is sent to the user via email or phone, which must be entered in order to proceed. Users also have the option to request a new code if they did not receive the original code. It is crucial that the process is well explained, as users may need to switch to a different device or tool to complete this step.
This step can be challenging for some users, so it should be kept as simple as possible to prevent user frustration. Automatically filling in the code, for example using one-time code autofill on the iPhone or restricting the keyboard to numbers only, can be helpful and is recommended to simplify the process.