Wizard layout

A wizard walks someone through an ordered set of steps, one screen at a time: a progress indicator at the top, the current step's content in the middle, and the actions that move the flow forward at the bottom.

Build it from a Page whose body is a stack of PageSections, with a Stepper heading the flow.

Structure

Three sections inside the body:

1. The Stepper — full width, so it isn't squeezed into the reading column.
2. The step content — contentWidth="narrow", usually a Panel holding the form.
3. The actions — contentWidth="narrow", so they line up with the content above.

Leave PageBody unconstrained and put the width on the sections. A section can never be wider than the body containing it, so constraining the body would cap the Stepper too.

The Stepper

Use layout="fit" so the Stepper sizes to its steps and centres itself. With the default layout="fill" a full-width section stretches the steps across the entire viewport.

Use size="sm". At the default md the markers dominate a header that's only meant to orient someone within the flow.

Keep the flow to roughly three to six steps. If there are so many that even a full-width section crowds them, regroup the flow rather than widening it — see Stepper.

Flagging steps with problems

When validation finds something on a step the customer has moved past, flag that step: status="critical" when its errors block submitting the wizard, status="caution" when it needs a look but the flow can still be finished.

Those markers are a pointer, not the message. They say which step to go back to and nothing about what is wrong, so they complement the step's own errors rather than standing in for them. Keep both in place:

• The inline field errors on the step itself, so the problem is readable where it can be fixed.
• The alert on the review step that lists what still blocks submission, if the wizard has one.

A red marker with no explanation anywhere sends someone back to a step to hunt for the problem themselves. Give flagged steps an href too — the point of pointing at a step is that they can reach it.

Dividers

Put a divider on the step content section. That draws the line on the boundary below it, which is the rule above the actions — the API expresses a divider as belonging to the section before it, never after the last one.

Leave the Stepper's section undivided. The gap alone separates it from the content, and a second rule so close to the header's own border reads as clutter.

Actions

The actions are the last section rather than a slot of their own, so they scroll with the step's content and stay inside the reading column.

mr="auto" on the back button pushes the forward action to the trailing edge. Put the action that advances the flow last, so it sits where the eye finishes.

Stepper beside the content

The Stepper can sit beside the step content instead of above it, in a PageRail. Use it to keep the steps in view the whole way through a long flow, or when they read better stacked than strung across the top.

The rail replaces the Stepper's section, the Stepper turns vertical, and the remaining sections go inside a PageBodyContent. Set the width once with bodyContentWidth on the Page — the rail positions itself against the step content, so the sections no longer set their own.

Drop layout="fit" — it only affects a horizontal Stepper. Keep size="sm".

A rail doesn't make a long flow work. If a vertical Stepper is what makes eight steps fit, the flow still needs regrouping.