---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/phone-input-screens-states/"
section: "design-and-ux"
group: "Module Customization / Phone Number Input Design"
version: "v1.1"
status: "live"
---
# Screens & States
A complete view of all screens the user may encounter during the **Phone Number Input** experience. Each state includes a brief description.
***
## 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.