Examples
Basic
Server-driven steps — HTMX swaps each step from
/api/htmx/wizard/basic/step/n.
General info
Tell us about the cluster you're creating.
With review
HTMX flavor ending in a review step.
Project details
Name the project and pick a visibility.
Plain
pf-m-plain removes the nav background.
Information
Information content.
Configuration
Configuration content.
Review
Review content.
Header
__header with title, description, and close button.
Create cluster
Information
Information content.
Configuration
Configuration content.
Review
Review content.
Basic with disabled steps
A locked step uses pf-m-disabled + disabled.
Information
Information content.
Review
Review content.
Incrementally enabled steps
Steps stay disabled until Next has reached them; visited steps stay clickable.
Step 1
Step 1 content
Step 2
Step 2 content
Step 3
Step 3 content
Step 4
Step 4 content
Review
Review step content
Expandable steps
pf-m-expandable/pf-m-expanded nav item with a nested step list.
Information
Information content.
Network
Network content.
Storage
Storage content.
Review
Review content.
Step status
pf-m-success / pf-m-danger nav links with status icons.
Information
Information content.
Configuration
Configuration content.
Review
Review content.
Enabled on form validation
Next stays disabled until the required field is filled.
Name
Review
Review content.
Validate on button press
Pressing Next with an empty field shows the error helper.
Name
Review
Review content.
Progressive steps
Choosing Custom setup adds a step to the nav.
Setup mode
Custom settings
Custom settings content.
Review
Review content.
Toggle step visibility
A checkbox shows/hides the optional step.
Information
Information content.
Optional step
Optional step content.
Review
Review content.
Progress after submission
Finish runs a progress bar to completion.
Information
Information content.
Review
Press Finish to submit.
Configuration submitted successfully.
Custom navigation
The nav is built by hand instead of generated from the steps, so every item is freely clickable.
Focus content on next/back
After Next or Back, keyboard focus jumps to the step content body.
Step 1
Step 1 content
Step 2
Step 2 content
Review
Review step content
With drawer
The wizard body hosts a drawer — step content opens a details panel in place.
Step content lives in the drawer content area.
With drawer and informational step
Every step carries an inline "see more information" link that opens a drawer beside the step content; Configuration expands into two substeps.
Information content
Wizard description goes here. If you need more assistance, in the side drawer.
Documentation
Wizard props
The wizard is a template family: wizard renders the nav / main / footer scaffold (fill
the navItems, body, and
footer slots), and each step in the nav is a
wizard-nav-item include. The Alpine step machine lives on a wrapper div;
currentExpr binds the active step. The Wizard model covers header and
expandable-substep variants; only the heavily custom within-modal variant stays hand-rendered.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id on the wizard root. Used as the HTMX swap target for step navigation. |
navLabel
|
String |
Sets aria-label on the step nav. Defaults to
Steps.
|
slot navItems
|
Qute block | <li class="pf-v6-c-wizard__nav-item"> entries — flat or nested with an inner <ol> for substeps. |
attrs / plain / hasHeader
|
String / Boolean | Root x-data passthrough; pf-m-plain; render the wizardHeader slot. |
wizard-nav-item
|
Include |
One step: label, current /
currentExpr, disabled,
status (success|error), stepNum,
attrs (@click / hx-*).
|
slot body
|
Qute block | The current step's content (heading + form / review). |
slot footer
|
Qute block |
Back / Next / Finish / Cancel buttons, grouped in a pf-v6-c-action-list —
Back/Next in one group, Cancel in its own.
|
Usage
Server holds the state, HTMX moves between steps. Each nav item and the Back/Next buttons send an
hx-get to /api/htmx/wizard/{flavor}/step/{n}. The
handler returns a fresh wizard root with the new step highlighted and the right body + footer. Target the wizard's
id with hx-swap="outerHTML" so the swap replaces nav and main together.
Persist progress with form posts. In a real flow each Next would
hx-post the current step's form (so the server validates and stores), then return the
next step. The demos use hx-get because they don't persist anything.
Substeps. Nest an <ol class="pf-v6-c-wizard__nav-list"> inside a
parent <li>. Toggle aria-expanded on the parent
button when one of its children is current.