Wizard

A generic wizard control for checkout, creation and multi-step forms.

Import

import { Wizard } from "@schukai/monster/source/components/form/wizard.mjs";

Source

View source code

Package

@schukai/monster

Since

4.126.0

Collect the basic identity data for the new workspace.

Name

Capture the legal or internal workspace name.

Company

Review

The final step can trigger a completion callback.

Fill the required fields to move through the wizard.

Introduction

monster-wizard organizes complex forms into guided steps so users can move through long workflows in a controlled sequence.

Key Features

Step-based flow: Splits larger forms into manageable sections.
Progress guidance: Helps users understand where they are.
Validation-friendly: Fits staged form checks and navigation rules.

Wizard Basic

This example uses monster-wizard to split a setup flow into three simple panels with built-in navigation and action buttons.

Collect the basic identity data for the new account.

Name

Capture workspace or legal-entity information.

Company

Review

Review the collected data and submit the wizard.

Javascript

/** this example does not use an extra script **/

HTML

<monster-wizard id="wizard-demo">
  <section data-monster-option-navigation-label="Account">
    <monster-field-set
      data-monster-option-labels-title="Create account"
      data-monster-option-features-multiplecolumns="false"
    >
      <p class="grid-span-full">
        Collect the basic identity data for the new account.
      </p>
      <label for="wizard-demo-name">Name</label>
      <input id="wizard-demo-name" type="text" placeholder="Jane Doe" />
    </monster-field-set>
  </section>

  <section data-monster-option-navigation-label="Company">
    <monster-field-set
      data-monster-option-labels-title="Company details"
      data-monster-option-features-multiplecolumns="false"
    >
      <p class="grid-span-full">Capture workspace or legal-entity information.</p>
      <label for="wizard-demo-company">Company</label>
      <input id="wizard-demo-company" type="text" placeholder="Monster Inc." />
    </monster-field-set>
  </section>

  <section data-monster-option-navigation-label="Finish">
    <h3>Review</h3>
    <p>Review the collected data and submit the wizard.</p>
  </section>
</monster-wizard>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Validated Wizard Transitions

Combines native validation with the wizard's invalid callback and panel-change event.

Review the account details.

Javascript

import "@schukai/monster/source/components/form/wizard.mjs";

const wizard = document.getElementById("validated-wizard");
const status = document.getElementById("validated-wizard-status");
wizard.setOption("validation.native", true);
wizard.setOption("actions.invalid", () => {
  status.textContent = "Complete the required email before continuing.";
});
wizard.addEventListener("monster-wizard-panel-change", event => {
  status.textContent = `Opened step ${event.detail?.toIndex + 1}`;
});

HTML

<monster-wizard id="validated-wizard">
  <section id="account-step" data-monster-option-navigation-label="Account"><label>Email <input type="email" required></label></section>
  <section id="review-step" data-monster-option-navigation-label="Review"><p>Review the account details.</p></section>
</monster-wizard>
<output id="validated-wizard-status"></output>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The wizard coordinates step content, navigation, and state transitions while leaving form markup and validation logic to the surrounding workflow.

Styling Hooks

activeStep: Controls the currently visible section.
labels: Customizes navigation and progress text.
::part(...): Styles step containers and navigation regions.

Customizing With Parts

You can adapt the visual appearance through exported parts instead of modifying the internal template. This reference is generated from the current component source.

The component exposes these part names:

actions: Container for the component actions.
body: Element representing the body.
content: Main content region.
control: Outer wrapper of the component.
navigation: Element representing the navigation.
next: Element representing the next.
panel-slot: Element representing the panel slot.
previous: Element representing the previous.
status: Live component status region.
submit: Element representing the submit.

HTML Structure

<monster-wizard></monster-wizard>

JavaScript Initialization

const element = document.createElement('monster-wizard');
document.body.appendChild(element);

Exported

Wizard

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Text labels

labels.previous

string

undefined

Previous button label

labels.next

string

undefined

Next button label

labels.submit

string

undefined

Submit button label

labels.stepStatus

string

undefined

Step status pattern with `{current}` and `{total}`

features

object

Feature toggles

features.allowBackNavigation

boolean

true

Allows navigation to previous panels

features.allowForwardNavigation

boolean

true

Allows navigation to next panels

features.allowDirectNavigation

boolean

true

Allows skipping ahead using the navigation

features.showActions

boolean

true

Shows the action buttons row

features.hideSubmittedActions

boolean

false

Hides buttons after completion

features.autoFocus

boolean

false

Focuses the first focusable element of the active panel

features.keepCompletedNavigationState

boolean

true

Marks visited items as completed in the navigation

validation

object

Validation settings

validation.native

boolean

true

Runs `reportValidity()` on native forms and form controls before moving forward

validation.selector

string

input,select,textarea,button,monster-select,monster-password,monster-toggle-switch,monster-digits

Selector for standalone controls that should run `reportValidity()`

validation.callback

function|null

Global validation callback receiving a transition context

validation.panels

object<string,function>

undefined

Panel validation callbacks, keyed by panel id

validation.groups

object<string,function>

undefined

Group validation callbacks, keyed by group id

actions

object

Callback actions

actions.beforeStepChange

function|null

Called before a panel change. Return `false` to cancel.

actions.afterStepChange

function|null

Called after a panel change.

actions.invalid

function|null

Called when validation blocks navigation.

actions.complete

function|null

Called when submit is triggered on the last panel.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

next()

Returns

{Promise<boolean>}

Navigate to the next panel.

previous()

Returns

{Promise<boolean>}

Navigate to the previous panel.

refresh()

Returns

{Wizard}

Rebuild the internal navigation structure from the slotted panels.

Structural methods

getCurrentIndex()

Returns

{number}

Returns the current panel index.

getCurrentPanel()

Returns

{HTMLElement|null}

Returns the current panel element or null.

Static methods

[instanceSymbol]()

No description available.

getCSSStyleSheet()

No description available.

getTag()

No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

No description available.

Other methods

goTo(targetIndex,[options])

Parameters

targetIndex {number}: targetIndex
[options] {object}: Optional force flag and navigation reason.

Returns

{Promise<boolean>}

Navigate to the requested panel index.

submit()

Returns

{Promise<boolean>}

Trigger the completion flow on the last panel.

validateCurrent()

Returns

{Promise<boolean>}

Validates the current panel without changing the current position.

Events

The component emits the following events:

monster-wizard-refresh
monster-wizard-change-request
monster-wizard-validation
monster-wizard-panel-change
monster-wizard-invalid
monster-wizard-complete
monster-wizard-final-panel-show

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.