Navigation Back to home

Wizard

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

Import
the javascript logo
import { Wizard } from "@schukai/monster/source/components/form/wizard.mjs";
Source
the git logo
Package
the npm logo
Since
4.126.0

Create account

Collect the basic identity data for the new workspace.

Workspace setup

Capture the legal or internal workspace name.

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.

Create account

Collect the basic identity data for the new account.

Company details

Capture workspace or legal-entity information.

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">
    <h3>Create account</h3>
    <p>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" />
  </section>

  <section data-monster-option-navigation-label="Company">
    <h3>Company details</h3>
    <p>Capture workspace or legal-entity information.</p>
    <label for="wizard-demo-company">Company</label>
    <input id="wizard-demo-company" type="text" placeholder="Monster Inc." />
  </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

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.

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}
Navigate to the next panel.
previous()
Returns
  • {Promise}
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]()4.126.0
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
A reusable wizard container that combines content panels with monster-wizard-navigation. Every direct child panel that defines data-monster-option-navigation-label becomes a wizard panel. Panels sharing the same label are grouped into one main step. Optional sub labels can be defined with data-monster-option-navigation-sub-label.
getCSSStyleSheet()
To set the options via the HTML tag, the attribute data-monster-options must be used.
getTag()
To set the options via the HTML tag, the attribute data-monster-options must be used.

Lifecycle methods

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

[assembleMethodSymbol]()
To set the options via the HTML tag, the attribute data-monster-options must be used.

Other methods

goTo(targetIndex,)
Parameters
  • targetIndex {number}: targetIndex
  • undefined {object}: [options]
Returns
  • {Promise}
Navigate to the requested panel index.
submit()
Returns
  • {Promise}
Trigger the completion flow on the last panel.
validateCurrent()
Returns
  • {Promise}
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
  • 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.