RegisterWizard

A multi-step registration wizard with availability checks and register submit.

Import

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

Source

View source code

Package

@schukai/monster

Since

4.38.0

Introduction

The monster-register-wizard control provides a guided, multi-step registration flow with built-in validation, availability checks, and consent handling. It is designed to work with multiple API shapes through mapping options.

Flow Overview

Email step with availability check
Password step (optional confirm password)
Profile step (name, optional birth date and nationality)
Address step (street, zip, city, country)
Consents step (required and optional topics)

The wizard navigation groups steps into Account, Profile, and Consents. Each step is validated before moving on, and invalid fields trigger inline messages on the action buttons.

Availability Check

Configure a POST endpoint and map the payload and response fields. When features.requireAvailability is enabled, the wizard blocks step changes until the email is confirmed as available.

Register Submit

The submit payload is built from the collected form values and mapped using dot-paths so it can match different backend shapes without changing the UI.

Consents

Consents can be provided statically via consents.topics or fetched from a URL and mapped into the expected topic/label/required structure.

Events

monster-register-wizard-step-change
monster-register-wizard-availability-check
monster-register-wizard-availability-result
monster-register-wizard-register
monster-register-wizard-success
monster-register-wizard-error
monster-register-wizard-invalid

Basic Register Wizard

A basic register wizard with inline step hints and static consent topics. Availability checks are disabled so the flow can be tested without a backend.

Create account

We use your email for account access and notifications.

You can change marketing preferences later.

Registration completed.

You can continue with the next step.

Javascript

import '@schukai/monster/source/components/form/register-wizard.mjs';

const wizard = document.getElementById('register-wizard-basic');

wizard.setOption('tenant.id', '00000000-0000-0000-0000-000000000000');
wizard.setOption('features.requireAvailability', false);
wizard.setOption('features.confirmPassword', true);
wizard.setOption('features.showBirthDate', true);
wizard.setOption('features.showNationality', true);
wizard.setOption('consents.topics', [
    { topic: 'terms', label: 'Terms and conditions', required: true },
    { topic: 'privacy', label: 'Privacy policy', required: true },
    { topic: 'marketing', label: 'Marketing', required: false }
]);

wizard.refresh();

HTML

<monster-register-wizard id="register-wizard-basic">
    <h2 slot="title">Create account</h2>
    <p slot="email-info">We use your email for account access and notifications.</p>
    <p slot="consents-info">You can change marketing preferences later.</p>
    <div slot="success">
        <strong>Registration completed.</strong>
        <p>You can continue with the next step.</p>
    </div>
</monster-register-wizard>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The monster-register-wizard control uses Shadow DOM and exposes key elements via exported parts and named slots for customization.

Slots

title: Header title for the wizard.
email-info, password-info, profile-info, address-info, consents-info: Inline hints per step.
email-fields, password-fields, profile-fields, address-fields, consents-fields: Extra fields inside each step.
success: Content shown after successful registration.
footer: Optional footer content.

Exported Parts

control, header, body, nav, content, panel
form, field-set, field-label, input
actions, back-button, next-button, submit-button
availability-message, step-message
consents-title, consents-list, consent-row, consent-label, consent-description


monster-register-wizard::part(actions) {
    justify-content: space-between;
}

monster-register-wizard::part(submit-button) {
    min-width: 12rem;
}

HTML Structure

<monster-register-wizard></monster-register-wizard>

JavaScript Initialization

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

Exported

RegisterWizard

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

Labels

features

object

Feature toggles

requirements

object

Field requirement flags

tenant

object

Tenant configuration

availability

object

Availability check config

object

consents

object

Consent topics config

actions

object

Callback actions

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

refresh()

To set the options via the HTML Tag, the attribute data-monster-options must be used.

Static methods

[instanceSymbol]()4.38.0

Events

monster-register-wizard-step-change
monster-register-wizard-availability-check
monster-register-wizard-availability-result
monster-register-wizard-register
monster-register-wizard-success
monster-register-wizard-error
monster-register-wizard-invalid

Registration wizard control using wizard navigation and multi-step forms.

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.

Events

The component emits the following events:

monster-register-wizard-step-change
monster-register-wizard-availability-check
monster-register-wizard-availability-result
monster-register-wizard-register
monster-register-wizard-success
monster-register-wizard-error
monster-register-wizard-invalid
monster-register-wizard-step-change
monster-register-wizard-availability-check
monster-register-wizard-availability-result
monster-register-wizard-register
monster-register-wizard-success
monster-register-wizard-error
monster-register-wizard-invalid

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.