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();<script type="module">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();</script>

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 **/

Open in playground

Registration Feature Configuration

Changes optional registration fields at runtime and refreshes the public wizard layout.

Create contributor account

Javascript

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

const wizard = document.getElementById("feature-register-wizard");
wizard.setOption("features.requireAvailability", false);
wizard.setOption("features.confirmPassword", true);

document.getElementById("feature-register-extended").addEventListener("click", () => {
  wizard.setOption("features.showBirthDate", true);
  wizard.setOption("features.showNationality", true);
  wizard.refresh();
});

HTML

<section style="display:grid;gap:var(--monster-space-3)">
  <monster-register-wizard id="feature-register-wizard">
    <h2 slot="title">Create contributor account</h2>
  </monster-register-wizard>
  <button id="feature-register-extended" type="button">Request extended profile</button>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

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;
}

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.
availability-datasource: Element representing the availability datasource.
availability-message: Element representing the availability message.
back-button: Element representing the back button.
birth-date-label: Element representing the birth date label.
body: Element representing the body.
city-label: Element representing the city label.
consents-datasource: Element representing the consents datasource.
consents-list: Element representing the consents list.
consents-title: Element representing the consents title.
content: Main content region.
control: Outer wrapper of the component.
country-label: Element representing the country label.
email-label: Element representing the email label.
field-label: Element representing the field label.
field-set: Element representing the field set.
field-set-address: Element representing the field set address.
field-set-consents: Element representing the field set consents.
field-set-email: Element representing the field set email.
field-set-password: Element representing the field set password.
field-set-profile: Element representing the field set profile.
first-name-label: Element representing the first name label.
footer: Footer region.
header: Header region.
input: Native or component input element.
input-birth-date: Element representing the input birth date.
input-city: Element representing the input city.
input-country: Element representing the input country.
input-email: Element representing the input email.
input-first-name: Element representing the input first name.
input-last-name: Element representing the input last name.
input-nationality: Element representing the input nationality.
input-password: Element representing the input password.
input-password-confirm: Element representing the input password confirm.
input-street: Element representing the input street.
input-zip: Element representing the input zip.
last-name-label: Element representing the last name label.
nationality-label: Element representing the nationality label.
nav: Navigation container.
nav-control: Element representing the nav control.
next-button: Element representing the next button.
panel: Element representing the panel.
panel-address: Element representing the panel address.
panel-consents: Element representing the panel consents.
panel-email: Element representing the panel email.
panel-password: Element representing the panel password.
panel-profile: Element representing the panel profile.
panel-success: Element representing the panel success.
password-confirm-label: Element representing the password confirm label.
password-label: Element representing the password label.
register-datasource: Element representing the register datasource.
slot: Element representing the slot.
slot-address: Element representing the slot address.
slot-consents: Element representing the slot consents.
slot-email: Element representing the slot email.
slot-password: Element representing the slot password.
slot-profile: Element representing the slot profile.
step-label: Element representing the step label.
step-message: Element representing the step message.
street-label: Element representing the street label.
submit-button: Element representing the submit button.
success-title: Element representing the success title.
zip-label: Element representing the zip label.

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()

No description available.

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.

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

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.