---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/email-input-screens-states/"
section: "design-and-ux"
group: "Module Customization / Email Input Design"
version: "v1.1"
status: "live"
---
# Screens & States

A complete view of all screens the user may encounter during the **Email Input** module experience. Each state includes a brief description.

***

## Enter Email

Guides the user from an empty field to a valid email and into submission. The Continue button is disabled until a valid format is detected; it activates once validation passes. While submitting, the button shows a loading state to prevent duplicate requests.

<Image align="center" src="https://developer.incode.com/assets/01b3c5ccd2a7181cc662bcf1232c0d43.png" />

<br />

<br />

## Enter Code (OTP Input)

Displayed after the user submits an email. 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.

<Image align="center" src="https://developer.incode.com/assets/3201299b431da9f6fe286ad48e2b97f3.png" />

<br />

<br />

## Processing

A short step after the OTP is submitted. Spinner + status text communicates progress while preventing multiple submissions. This state should be brief and non-interruptible (except for closing the module, if allowed by host app).

<Image align="center" src="https://developer.incode.com/assets/86c3461c309a9c12f8e8f4ff7e30ca75.png" />

<br />

<br />

## Success

Confirms verification with a positive icon and concise message (Email verified!). Automatically progresses to the next module or returns control to the host app per integration settings.

<Image align="center" src="https://developer.incode.com/assets/95a53b85d52c228efc89349e50a844f4.png" />

<br />

<br />

## Error States (Email & OTP)

Covers common failures:

* Invalid email format (inline helper text; button remains disabled)
* Incorrect code (inputs marked, helper text provided)
* Code expired (inputs marked, helper text provided)

Recovery affordances (Resend code, Change email) remain visible. Copy is intentionally brief to avoid over-explaining and reduce the risk of aiding malicious testing.

<Image align="center" src="https://developer.incode.com/assets/527c5c3a6908ce293a973a5695c3e7c8.png" />