Multi-step form

Preview Available in release assets

Progress through a server-owned workflow using independently addressable steps and ordinary native forms.

Server contract

GET or POST /api/advanced/multi-step-form?step=contact|details|review renders the complete current step. Include the server revision in each native POST; a Datastar request to the same action receives only the stable current-step fragment. Never derive completed steps or branching in client state.

Each deep link renders a complete page and every native form navigates to a complete server response without JavaScript.

Multi-step form primary example

<main class="thin-multi-step-form" aria-labelledby="application-title">
  <nav aria-label="Application progress">
    <ol>
      <li><a href="/apply/contact" aria-current="step">1. Contact</a></li>
      <li><a href="/apply/details">2. Details</a></li>
      <li><a href="/apply/review">3. Review</a></li>
    </ol>
  </nav>
  <h1 id="application-title">Contact information</h1>
  <p>Step 1 of 3. Progress is loaded from the server.</p>
  <form action="/apply/contact" method="post">
    <div class="thin-field">
      <label for="application-email">Email address</label>
      <input class="thin-input" id="application-email" name="email" type="email" autocomplete="email" required />
    </div>
    <input type="hidden" name="revision" value="server-revision-7">
    <button class="thin-button">Continue</button>
  </form>
</main>

Show code

<main class="thin-multi-step-form" aria-labelledby="application-title">
  <nav aria-label="Application progress">
    <ol>
      <li><a href="/apply/contact" aria-current="step">1. Contact</a></li>
      <li><a href="/apply/details">2. Details</a></li>
      <li><a href="/apply/review">3. Review</a></li>
    </ol>
  </nav>
  <h1 id="application-title">Contact information</h1>
  <p>Step 1 of 3. Progress is loaded from the server.</p>
  <form action="/apply/contact" method="post">
    <div class="thin-field">
      <label for="application-email">Email address</label>
      <input class="thin-input" id="application-email" name="email" type="email" autocomplete="email" required />
    </div>
    <input type="hidden" name="revision" value="server-revision-7">
    <button class="thin-button">Continue</button>
  </form>
</main>

Anatomy

Server-authored progress navigation
Addressable step heading
Native POST form
Revision input
Continue and exit destinations

Variants and sizes

Linear
Review and edit
Optional step

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Current step
Completed step
Server validation error
Conflict
Pending
Expired session
Deep link
Reconnect
Long content
No JavaScript

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Every step has a durable URL and submits a normal form. Datastar may morph the server response and pending state, but the server owns progress, branching, validation, revisions, and completion.

Accessibility

Use a named progress nav with aria-current=step, one page heading, visible labels, an error summary linked to fields, preserved focus after validation, and ordinary back/exit links.

Contract

COMPOSE

Basis

Native navigation links, form, and submit controls; no APG widget

Evidence

tests/unit/library/multi-step-form.test.ts

API

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Each deep link renders a complete page and every native form navigates to a complete server response without JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/multi-step-form/style.ts

Composition

Derived from the examples and style specs, not authored.