---
title: "Screens & States"
url: "https://developer.incode.com/design-and-ux/screens-states-forms/"
section: "design-and-ux"
group: "Module Customization / Forms And Data Entry Design"
version: "v1.1"
status: "live"
---
# Screens & States

This section provides a complete overview of all possible user-facing states within the **Forms and Data Entry**

***

## Forms empty

Entry point of the data entry module. This screen presents the user with a form containing four customizable required fields: ID number, Email, Country of residence, and Date of Birth . All fields are empty and the "Continue" button is disabled until the user provides valid input.

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

<br />

## Forms Filled

This state confirms that the user has completed all required fields in the form. All four customizable fields — ID number, Email, Country of residence, and Date of Birth — contain valid input, and the "Continue" button is now enabled, allowing the user to proceed to the next step.

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

<br />

## Forms Loading

This state is triggered after the user taps "Continue" with all required fields completed. The form remains visible with the filled data, while the primary button transitions to a loading state, displaying a spinner as the submission is being processed..

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

<br />

## Form Success

This state confirms that the user's information has been successfully submitted. The screen displays a green checkmark icon accompanied by the message "Success!," indicating the process has been completed and the user can proceed to the next step in the flow.

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