# 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://files.readme.io/9ea06093012efc2e6a5976427bbaa0f13ca52ea603057952db0ca6b293c06d7a-screens-and-states-1.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://files.readme.io/579a0ed72e1dfcc6bc9a2934548c01050572e4f59270bd99d87becc2ab1a3475-screens-and-states-2.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://files.readme.io/a199e2e90a1f536c7a951896886553cb8eebded5daf7d47da8a0d91e4408a90c-screens-and-states-3.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://files.readme.io/bc7c3bfcdddaee612fe229739c78a2eadf1d102de6faa90a6e72fe532bde6366-screens-and-states-4.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://files.readme.io/e26460dae5f5f5e149601ada9361cc71cf07553d3e741c25a9e42e404377e298-screens-and-states-5.png" />