Sign-up — Multi-step with progress

A static second-step registration form beneath a three-step progress indicator. Use to collect workspace details while showing completed and upcoming steps.

ReactHTML

1440 × 900

Open in new tab

Component.tsx64 lines

export default function SignupMultiStep() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-2xl">
          <ol role="list" aria-label="Registration progress" className="flex items-center gap-2">
            <li className="flex min-w-0 flex-1 items-center gap-2">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m5 12 4 4L19 6" /></svg></span>
              <span className="sr-only text-sm text-neutral-600 sm:not-sr-only">Account<span className="sr-only">, completed</span></span>
              <span aria-hidden="true" className="h-px flex-1 bg-neutral-200" />
            </li>
            <li aria-current="step" className="flex min-w-0 flex-1 items-center gap-2">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-900 bg-neutral-900 text-sm font-medium text-white forced-colors:border-[Highlight] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]">2</span>
              <span className="sr-only text-sm font-medium sm:not-sr-only">Workspace</span>
              <span aria-hidden="true" className="h-px flex-1 bg-neutral-200" />
            </li>
            <li className="flex items-center gap-2">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-sm text-neutral-500">3</span>
              <span className="sr-only text-sm text-neutral-500 sm:not-sr-only">Finish</span>
            </li>
          </ol>
          <p className="mt-4 text-sm font-medium sm:hidden">Step 2 of 3: Workspace</p>
          <form className="mt-8 rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
            <fieldset className="min-w-0">
              <legend className="text-2xl font-semibold tracking-tight">Workspace details</legend>
              <p className="mt-3 text-sm text-neutral-600">Short explanation of the details needed for this step.</p>
              <div className="mt-6 grid gap-5">
                <div>
                  <label htmlFor="signup-multi-step-company" className="block text-sm font-medium text-neutral-900">Company name</label>
                  <input id="signup-multi-step-company" name="company" type="text" autoComplete="organization" required placeholder="Company name" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
                </div>
                <div>
                  <label htmlFor="signup-multi-step-team-size" className="block text-sm font-medium text-neutral-900">Team size</label>
                  <select id="signup-multi-step-team-size" name="team-size" autoComplete="off" defaultValue="" required aria-describedby="signup-multi-step-team-size-hint" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
                    <option value="" disabled>Select a team size</option>
                    <option value="1">Just me</option>
                    <option value="2-10">2–10 people</option>
                    <option value="11-50">11–50 people</option>
                    <option value="51-plus">51 or more people</option>
                  </select>
                  <p id="signup-multi-step-team-size-hint" className="mt-2 text-sm text-neutral-500">Include everyone who will use the workspace.</p>
                </div>
                <div>
                  <label htmlFor="signup-multi-step-role" className="block text-sm font-medium text-neutral-900">Role</label>
                  <select id="signup-multi-step-role" name="role" autoComplete="organization-title" defaultValue="" required aria-describedby="signup-multi-step-role-hint" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
                    <option value="" disabled>Select your role</option>
                    <option value="member">Member</option>
                    <option value="manager">Manager</option>
                    <option value="owner">Owner</option>
                  </select>
                  <p id="signup-multi-step-role-hint" className="mt-2 text-sm text-neutral-500">Choose the role closest to your responsibilities.</p>
                </div>
              </div>
            </fieldset>
            <footer className="mt-8 flex flex-col gap-3 border-t border-neutral-200 pt-6 sm:flex-row sm:justify-between">
              <button type="submit" className="w-full inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:order-2 sm:w-auto">Continue</button>
              <a href="#" className="w-full inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:order-1 sm:w-auto">Back</a>
            </footer>
          </form>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use as the workspace-details step of a longer account flow. Pick signup-form-aside when all details should remain on one page. Variations: change the current step, add a workspace URL field, or replace Role with intended use.
Hierarchy: The progress indicator shows Account completed, Workspace current and Finish upcoming; Workspace has aria-current=step. The fieldset legend is 24px semibold, followed by a 14px explanation and labelled Company name, Team size and Role fields. Back is secondary and Continue primary. Slots: legend up to 4 words, explanation up to 20, each field hint up to 12.
Responsive: Below 640px all step labels are visually hidden in the row and a visible caption beneath it reads Step 2 of 3: Workspace. The footer stacks with Continue first at full width. From 640px labels sit beside the circles, the caption hides, card padding is 32px and the footer puts Back left and Continue right. The column remains at most 672px wide.
Layout: A white section has a max-w-3xl 768px shell with 24px gutters and 64px vertical padding, 96px from 640px. A centred max-w-2xl 672px column holds three ordered steps in a horizontal row with 32px circles, 8px gaps and flexible hairline connectors. A white bordered card sits 32px below, with an 8px radius and 24px padding, 32px from 640px. Its fieldset has 20px field gaps; the action footer is separated by a top hairline and 24px padding.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. Back fills neutral-50 on hover. Team size and Role are native required selects with disabled empty placeholders and linked hints. Company name uses organization autocomplete. In forced colours the current circle uses a Canvas fill, CanvasText numeral and Highlight border so the numeral stays readable and the current step remains distinct. Progress and navigation are static; no JavaScript advances the steps.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│         (Check) Account ── (2) Workspace ── (3) Finish   │
│         ┌────────────────────────────────────────┐       │
│         │ Current-step legend / Lede             │       │
│         │ Company name                           │       │
│         │ Team size [Select v]                   │       │
│         │ Role [Select v]                        │       │
│         ├────────────────────────────────────────┤       │
│         │ [Back]                      [Continue] │       │
│         └────────────────────────────────────────┘       │
└──────────────────────────────────────────────────────────┘

View all

Sign-up — Accept an invitation
Layout tags: centered,form,compact
Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact

Sign-up — Multi-step with progress

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers