Chapter 4 › Lesson 17

17. Prototype: Show Error State on Empty Form Submit

Skills: Create form screen with submit button; Duplicate screen with error states shown; Add interaction: On click (submit) → Navigate to error screen; Conditional: if fields empty show errors

When a user taps Submit on an empty form, the inputs should switch to Error state. You'll prototype this by connecting two screens: the default form and the error state form.

17. Prototype: Show Error State on Empty Form Submit
Figure: Two screens connected: one with a default form and Submit button, another showing inputs in Error state after tapping Submit.

Step-by-step

  1. Create a form screen with 2 input fields (both set to Empty variant) and a Submit button
  2. Duplicate the screen (select it, press Ctrl + D)
  3. On the duplicate, set both inputs to the Error variant and disable/grey out the Submit button
  4. Switch to Prototype mode
  5. Select the Submit button on screen 1, add interaction: On click → Navigate to screen 2
  6. Set the transition to Instant or Smart Animate with 200ms
  7. Set screen 1 as the Starting frame
  8. Press Present and tap Submit — the form switches to show error states

Pro tip

This is a simplified prototype. In a real flow, you'd add more screens showing partial filling, individual field validation, and successful submission. Start simple and build up.