Screens & States

A complete view of all screens the user may encounter during the Phone Number Input experience. Each state includes a brief description and a direct link to its source in Figma.

Open Full Screen and Specs in Figma (Link coming soon) Source of truth for layout, visual specs, interactions, and platform variations.

---

Enter Phone Number

This screen prompts the user to input their phone number for verification. It’s the initial state of the Phone Number Input step, featuring a country code selector, number input field, and a disabled Continue button until a valid format is detected.

Country Code selection appears when the user interacts with the country code dropdown. It allows selection from a list of international codes, ensuring compatibility with global users.

Enter Code (OTP Input)

Displayed after the user submits a valid phone number. The system sends an SMS with a one-time code, and this screen prompts the user to enter it. A countdown timer indicates when the “Resend code” option becomes available.

Success

After entering or auto-filling the correct code, the system verifies it and transitions to a success screen confirming “Phone verified!” before proceeding to the next module.

Error States

Displayed when the user enters an incorrect or expired code. The UI highlights the input fields in red and provides feedback such as:

• “Incorrect code, please try again.”
• “Code expired, please request a new one.”

Retry and resend options remain accessible, ensuring a smooth recovery path.