PixelPilot uiux-forms.instructions.md

UI/UX Forms 2026

Multi-step forms, autocomplete, password strength, phone + country picker, optimistic vs blocking submission, and form validation patterns. Forms are where users abandon products. Polish here = trust.

---

CRITICAL RULE: NO NATIVE BROWSER UI

All native browser UI elements (date picker, time picker, color picker, select dropdown, alerts) are prohibited.
Use custom token‑styled components as described in this file and uiux-interactive.md.
For date/time pickers, use Flatpickr (already in CDN stack) with token-based CSS overrides.
For alerts/confirmations, use swal helpers from uiux-components.md.

---

MULTI-STEP FORM

HTML Structure

<form class="multistep-form" id="msf" novalidate aria-label="Registration form">
  <!-- Progress bar -->
  <div class="msf-progress" role="progressbar"
    aria-valuenow="1" aria-valuemin="1" aria-valuemax="3"
    aria-label="Step 1 of 3">
    <div class="msf-progress__bar" style="width: 33.33%"></div>
  </div>

  <!-- Step indicator -->
  <nav class="msf-steps" aria-label="Form steps">
    <button type="button" class="msf-step active" data-step="1"
      aria-current="step" aria-label="Step 1: Your info">
      <span class="msf-step__num">1</span>
      <span class="msf-step__label">Your info</span>
    </button>
    <span class="msf-step-divider" aria-hidden="true"></span>
    <button type="button" class="msf-step" data-step="2"
      aria-label="Step 2: Account">
      <span class="msf-step__num">2</span>
      <span class="msf-step__label">Account</span>
    </button>
    <span class="msf-step-divider" aria-hidden="true"></span>
    <button type="button" class="msf-step" data-step="3"
      aria-label="Step 3: Confirm">
      <span class="msf-step__num">3</span>
      <span class="msf-step__label">Confirm</span>
    </button>
  </nav>

  <!-- Panels -->
  <div class="msf-panel active" data-panel="1" role="group" aria-label="Step 1: Your info">
    <div class="field">
      <input class="field__input" type="text" id="first-name" name="firstName"
        placeholder=" " autocomplete="given-name" required minlength="2">
      <label class="field__label" for="first-name">First name</label>
      <span class="field__error" role="alert"></span>
    </div>
    <div class="field">
      <input class="field__input" type="text" id="last-name" name="lastName"
        placeholder=" " autocomplete="family-name" required minlength="2">
      <label class="field__label" for="last-name">Last name</label>
      <span class="field__error" role="alert"></span>
    </div>
  </div>

  <div class="msf-panel" data-panel="2" role="group" aria-label="Step 2: Account" hidden>
    <div class="field">
      <input class="field__input" type="email" id="email" name="email"
        placeholder=" " autocomplete="email" required>
      <label class="field__label" for="email">Email address</label>
      <span class="field__error" role="alert"></span>
    </div>
    <!-- Password with strength meter (see below) -->
  </div>

  <div class="msf-panel" data-panel="3" role="group" aria-label="Step 3: Confirm" hidden>
    <!-- Summary / review -->
    <div class="msf-summary" id="msf-summary"></div>
  </div>

  <!-- Navigation -->
  <div class="msf-nav">
    <button type="button" class="btn btn--ghost msf-btn-back" id="msf-back" hidden>
      ← Back
    </button>
    <button type="button" class="btn btn--primary msf-btn-next" id="msf-next">
      Continue →
    </button>
    <button type="submit" class="btn btn--primary msf-btn-submit" id="msf-submit" hidden>
      Create account
    </button>
  </div>
</form>