Wizard
Multi-step wizard with visual stepper indicator, auto-generated navigation buttons, and server-side step state tracking.
<rhx-wizard>
Examples
Basic Wizard
A three-step wizard with automatic Previous/Next navigation via htmx.
Create Account
<rhx-wizard rhx-current-step="1" page="/Docs/Components/Wizard">
<rhx-wizard-step rhx-title="Account" rhx-status="current">
<h3>Create Account</h3>
<rhx-input name="username" rhx-label="Username" />
</rhx-wizard-step>
<rhx-wizard-step rhx-title="Profile" rhx-description="Personal info">
<h3>Your Profile</h3>
<rhx-input name="fullName" rhx-label="Full Name" />
</rhx-wizard-step>
<rhx-wizard-step rhx-title="Confirm">
<h3>Review & Confirm</h3>
<p>Please review your information before submitting.</p>
</rhx-wizard-step>
</rhx-wizard>
Vertical Layout
Please fill in the details.
<rhx-wizard rhx-current-step="2" rhx-layout="vertical" page="/Docs/Components/Wizard">
<rhx-wizard-step rhx-title="Basics" rhx-status="complete">...</rhx-wizard-step>
<rhx-wizard-step rhx-title="Details" rhx-status="current">...</rhx-wizard-step>
<rhx-wizard-step rhx-title="Review">...</rhx-wizard-step>
</rhx-wizard>
Server-Side State Tracking
Use WizardState and WizardSessionExtensions to track step progress across requests:
public IActionResult OnPostWizardNext(int step)
{
var state = TempData.GetWizardState("checkout");
state.MarkComplete(state.CurrentStep);
state.CurrentStep = step;
TempData.SetWizardState("checkout", state);
return Partial("_WizardPartial", state);
}