Wizard

A wizard guides the user through an ordered group of steps. It shows the list of steps with the current one highlighted, and the panel of the current step. The user moves with buttons whose next-step and prev-step actions are the ones below: press Next and Back in the playground, they run for real.

Live preview

LightDark

Controls

Steps

234

Orientation

HorizontalVertical

XML

<wizard id="demo" initial-load="enum" target-action="SignupSteps">
  <wizard-panel id="account">
    <tag type="p" label="Choose the name and the email of the new account." />
  </wizard-panel>
  <wizard-panel id="plan">
    <tag type="p"
         label="Pick the plan: monthly or yearly, with or without support." />
  </wizard-panel>
  <wizard-panel id="payment">
    <tag type="p" label="Enter the payment method and accept the conditions." />
  </wizard-panel>
</wizard>
<button id="Back" label="Back" style="btn-ghost">
  <button-action type="prev-step" target="demo" />
</button>
<button id="Next" label="Next" style="btn-primary">
  <button-action type="next-step" target="demo" />
</button>

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
wizard-panel	Steps	234
orientation	Orientation	horizontalvertical

Events and actions

Action (type)	What it does
next-step	Moves to the next step of the wizard named in target.
prev-step	Moves to the previous step.
first-step	Moves to the first step.
last-step	Moves to the last step.
nth-step	Moves to the step whose value (the id of its panel) is in the value parameter of the action.

Full reference

• Full documentation of this component
• XSD reference of the element

The steps come from an enumerated list or a query of the server (initial-load and target-action), and the value of each option is the id of its wizard-panel. Here the stage fills that list with a static one. A step ahead of the current one cannot be clicked: the user reaches it with Next, and can go back to the steps already done.

Recipes

Sign-up in three steps

Each wizard panel holds any component. The buttons are placed after the wizard, in a div of their own.

<wizard id="signup" initial-load="enum" target-action="SignupSteps">
  <wizard-panel id="who">
    <criteria id="Name" component="text" label="Name" placeholder="Full name" />
    <criteria id="Email" component="text" label="Email" icon="lucide:mail" />
  </wizard-panel>
  <wizard-panel id="plan">
    <criteria id="Plan" component="select" label="Plan" initial-load="enum" target-action="PlanList" />
  </wizard-panel>
  <wizard-panel id="done">
    <tag type="p" label="All set. Press Next again to stay on the last step." />
  </wizard-panel>
</wizard>
<tag type="div">
  <button id="Back" label="Back" style="btn-ghost">
    <button-action type="prev-step" target="signup" />
  </button>
  <button id="Next" label="Next" style="btn-primary">
    <button-action type="next-step" target="signup" />
  </button>
</tag>

Events and actions

A wizard has no event of its own: the user moves with the buttons, or by clicking a step already done. The actions that move it:

Action	Description
next-step	Moves to the next step of the wizard in target
prev-step	Moves to the previous step
first-step	Moves to the first step
last-step	Moves to the last step
nth-step	Moves to the step whose id is in the value parameter

A step that holds an invalid field is marked in the list.

More

• Full documentation of the wizard: attributes, orientation and examples.
• XSD reference of the wizard element.