Examples menu

🪄 Multi-step Form

Composition API: client inputs are #[Signal], while the step and validation error are #[Persist] — server-only state that survives between actions and drives the server-side re-render.

#[Persist] step & error — server-controlled state that is never sent to the client and never hydrated from it. Because the class instance lives for the whole connection, the step survives across Next/Back actions.
#[Signal] inputs — name, role, years, editor and the eight stack booleans are two-way bound via data-bind. They are hydrated onto the instance before each action runs.
$ctx->sync() — each action mutates $this->step (a #[Persist] prop the callable view reads live), then calls sync() to re-render the current step. No stale-signal timing issues.
Server-side validation — next() checks $this->name; on failure it sets $this->error and re-renders the same step with the message shown.
Session persistence — saveState() writes the current values to $ctx->setSessionData('wizard', …) on every step. view() resumes from the session on reconnect.
block: 'demo' — only the wizard block re-renders on each step change; the header and anatomy panel stay static in the DOM.
1 Basics 2 Stack 3 Preview

Step 1: The Basics

Source View page class .php → View template .twig →

⚡ Signals

step int Persist 1

#[Persist] — server-only current step (1–3). Drives which step UI is rendered.

error string Persist ""

#[Persist] — server-only validation message set by next() on step-1 failure.

name string TAB ""

#[Signal] — developer name, collected in step 1.

role string TAB "Backend Dev"

#[Signal] — selected role from the step-1 dropdown.

years int TAB 3

#[Signal] — years of experience, from the step-1 range slider.

sphp … sother bool TAB false

Eight #[Signal] booleans, one per stack technology, bound to step-2 checkboxes.

editor string TAB "VS Code"

#[Signal] — favourite editor, selected in step 2.

🎯 Actions

next

Validates step 1, increments $this->step, saves to session, then $ctx->sync() renders the next step.

back

Decrements $this->step and re-renders. Signal values from the previous step are preserved.

restart

Resets every signal + #[Persist] prop to defaults, clears the session, and returns to step 1.

👁 Views

wizard.html.twig

Single template with step-conditional blocks. step/error are passed as plain view data; inputs use auto-injected signals.