Form Wizard

<dsx-form-wizard> — Form Wizard

Wizard container plus step element for multi-step form flows.

Live Preview

Import

import '@bnotk/dsx/components/form-wizard.js';

Usage

<dsx-form-wizard linear>
  <dsx-wizard-step label="Account" completed>
    <p>Step one</p>
  </dsx-wizard-step>
  <dsx-wizard-step label="Profile">
    <p>Step two</p>
  </dsx-wizard-step>
</dsx-form-wizard>

Elements

<dsx-form-wizard>

Owns the active step index, renders clickable indicators, and projects wizard-step content.

Properties

Property	Type	Default	Description
linear	boolean	false	Requires earlier steps to be marked completed before navigating forward.

Methods

Method	Description
goTo(index: number)	Activates a specific step if the index is valid and linear-mode constraints allow it.
next()	Moves to the next step by delegating to goTo(_activeIndex + 1).
prev()	Moves to the previous step by delegating to goTo(_activeIndex - 1).

Events

Event	Detail	Description
dsx-step-change	{ index: number, label: string }	Bubbles/composed after the active step changes.

Slots

Slot	Description
default	One or more <dsx-wizard-step> children queried from the light DOM.

CSS Parts

This element does not expose shadow parts.

Notes

• The component queries steps from the light DOM with querySelectorAll rather than using slotchange bookkeeping.
• Both firstUpdated() and updated() call _syncSteps() to keep step active flags in sync.

<dsx-wizard-step>

Individual step pane projected into the wizard. Hidden unless active is true.

Properties

Property	Type	Default	Description
label	string	”	Label used in the wizard step indicator.
active	boolean	false	Reflects whether the step body is currently shown.
completed	boolean	false	Marks the step as completed and switches the indicator to a checkmark style.
disabled	boolean	false	Prevents indicator clicks for that step.

Methods

None.

Events

None.

Slots

Slot	Description
default	Step body content.

CSS Parts

This element does not expose shadow parts.

Notes

• The host uses display: none until the reflected active attribute is present.

Behavior Notes

• Linear mode blocks forward navigation unless every step between the current index and target index is marked completed.
• Indicator rows compute disabled state from both the step’s own disabled property and linear progression rules.
• Completed indicators show ✓ instead of a numeric index.

Styling Notes

• Indicators are rendered as a horizontal stepper with circular number badges and connector lines.
• Active states use the main color; completed states use the success color.