Quasar-Inspired Stepper Lab
Reusable Stepper Playground
Validate the shared Blade stepper partials, query-parameter navigation, per-step validation handling, arrow-style headers, and Livewire compatibility from one local page.
Query parameter sync
Linear Page Stepper With Query Navigation
Advance through a page-level wizard, watch the URL update with the active step key, and verify that failed validation returns to the first affected step.
Current query step
campaign
Type conversion breakpoint
Horizontal To Vertical Conversion At A Breakpoint
This example stays horizontal on larger screens, then swaps the same active step, validation flow, and navigation into the integrated vertical renderer below the configured breakpoint.
This step intentionally uses required fields so the debug flow can prove linear blocking before later panels open.
Campaign Details
Capture the core project details that should survive query-string navigation and server validation.
Delivery Setup
Choose the fulfillment path and capture the notes needed for handoff.
Review & Submit
Review the assembled payload before submitting the demo and verify that the final action can submit from the last panel.
Project name
Quasar migration pilot
Contact email
Shipping method
Pending
Delivery notes
No delivery notes captured yet.
This step intentionally uses required fields so the debug flow can prove linear blocking before later panels open.
Campaign Details
Capture the core project details that should survive query-string navigation and server validation.
Arrow navigation
Arrow Header Variant
This variant adapts the requested arrow-step layout into the same reusable partial API while keeping header navigation enabled.
Stepper navigation
Address routing
Use the same header variant for delivery routing, warehouse selection, or merchant intake steps.
Quasar-style vertical flow
Integrated Vertical Accordion Stepper
This example keeps each step header attached to its body so next and previous transitions close one panel while opening the next, similar to Quasar's vertical stepper flow.
This vertical example intentionally keeps the header and body together so the next step opens like an accordion instead of jumping to a detached panel below.
Selecting next collapses the planning body and opens this quality gate in the same stacked card flow.
This final panel mirrors Quasar's vertical finish step, where the previous bodies collapse and the last body becomes the only expanded content.
Flow type
Operations triage
Owner
Ops Enablement
Checklist status
Ready to publish
Advanced validation rules
Vertical Stepper With Shared Custom Validators
This vertical flow proves shared min-length, max-length, and named custom validator callbacks without relying on native minlength or maxlength attributes.
Try the default values first. The brief is too short and the summary is too long until you edit them.
This field uses the shared min-length rule instead of the native minlength attribute.
This textarea is capped by the shared max-length rule instead of the native maxlength attribute.
Advance only after the notes mention at least one allowed delivery channel.
Mention email, sms, or WhatsApp to satisfy the custom validator callback.
Channel notes
Mention at least one delivery channel: email, sms, or WhatsApp.
Once the earlier steps pass, this confirmation panel opens with the same vertical transition and done states as the rest of the shared component.
Validation summary
Once the earlier steps pass, this confirmation panel opens with the same vertical transition and done states as the rest of the shared component.
- Campaign brief
- Use at least 12 characters.
- Operational summary
- Use 90 characters or fewer.
- Channel notes
- Mention at least one delivery channel: email, sms, or WhatsApp.
Badge rail states
Step-Level Badges, Done, And Error States
This section proves the shared headers can show custom badges alongside runtime done and error states without changing the controller API.
Blocked shipment
The header can keep a custom badge and an error label visible together when an operator must return to a blocked panel.
Production drawer flow
Vertical Contracted Stepper In An Offcanvas
Open a right-side drawer that uses the same shared stepper API with a contracted vertical header and validation-gated navigation.
Livewire compatibility
Livewire Wrapper Demo
This section uses the same shared partials inside a Livewire form so validation and navigation still work after a Livewire round-trip.