Email Input

The Email Input module allows users to verify their email address by entering it and confirming a one-time passcode (OTP) sent to their inbox. This module ensures email ownership, a key step in identity verification and account activation flows. It is designed for clarity, speed, and accessibility — optimized for both native and web environments.

---

Where it fits in the flow

Email Input typically appears early in the onboarding or verification process, often as an alternative or complement to Phone Number Input.

Once the user confirms their email, the system proceeds to the next validation stage automatically or transitions to user onboarding logic configured by the client.

---

User Flow

The **Email Input **experience guides the user from entry to verification. After submitting a valid email address, the system sends a one-time passcode (OTP) to the provided address and prompts the user to enter it for confirmation.

If the email format is invalid or the OTP entry fails, fallback paths allow the user to correct their input, resend the verification code, or change the email address. Once the verification is successful, the user proceeds automatically to the next module or configured step in the flow.

---

Full Flow Map

This diagram presents the full sequence of screens involved in the Email Input module — from the initial email entry and format validation, through OTP verification and system feedback, to final confirmation.

It outlines both the ideal verification path and the alternative user journeys, including error handling for invalid email formats, incorrect codes, network issues, and retry flows. The map visualizes all possible user interactions and system states within the module, ensuring clarity for design, development, and QA alignment.

Open Full Flow Map in Figma (Link coming soon)

---

Happy Path (Light & Dark)

The ideal user journey when the email is verified successfully without interruptions.

The happy path represents the smoothest version of the experience — the user enters a valid email address, receives the verification code instantly, inputs the correct OTP, and the verification succeeds on the first attempt. No manual retries or format corrections are required.

Both light and dark mode previews are included so that design, product, and engineering teams can validate color contrast, typography consistency, and accessibility across all themes and devices.

Open Happy Path in Figma (Link coming soon)

---

Best Practices

Recommended guidelines for designing and implementing the Email Input experience.

✅ Do

• Keep the email input field clearly labeled and accessible.
• Display input validation (e.g., invalid format) immediately to reduce friction.
• Maintain consistent CTA placement (“Continue”) across all screens.

❌ Don’t

• Don’t delay validation — instant feedback improves trust and usability.
• Avoid truncating long email addresses.
• Don’t change button positions between steps; spatial consistency aids flow.