Form Wizard + Split Button

This showcase combines <dsx-form-wizard> with CSS toggle and radio controls, then finishes the settings step with a <dsx-split-button> for alternate save paths.

Live Preview

What it demonstrates

a 4-step wizard with Account and Profile completed, Settings active, and Review upcoming on load
settings-style layout using .dsx-toggle and .dsx-check primitives inside the active step
primary and secondary save actions with <dsx-split-button>
a review step that reflects the current toggle, radio, and action selections

Components used

Web Components: <dsx-form-wizard>, <dsx-wizard-step>, <dsx-split-button>, <dsx-split-option>
CSS primitives: .dsx-toggle, .dsx-check, .dsx-btn

Pattern summary

<dsx-form-wizard linear>
  <dsx-wizard-step label="Account" completed></dsx-wizard-step>
  <dsx-wizard-step label="Profile" completed></dsx-wizard-step>

  <dsx-wizard-step label="Settings">
    <label class="dsx-toggle">
      <input class="dsx-toggle__input" type="checkbox" checked>
      <span class="dsx-toggle__label">Security alerts</span>
    </label>

    <label class="dsx-check">
      <input class="dsx-check__input" type="radio" name="approval-flow" checked>
      <span class="dsx-check__label">Manager review</span>
    </label>

    <dsx-split-button label="Save &amp; Continue" variant="primary">
      <dsx-split-option value="draft">Save as Draft</dsx-split-option>
      <dsx-split-option value="review">Save &amp; Submit for Review</dsx-split-option>
      <dsx-split-option value="close">Save &amp; Close</dsx-split-option>
    </dsx-split-button>
  </dsx-wizard-step>

  <dsx-wizard-step label="Review"></dsx-wizard-step>
</dsx-form-wizard>

Notes

The demo initializes the wizard to step index 2 so Settings is the current step.
Save & Continue advances to the review step, while the dropdown options demonstrate draft, review-routing, and close flows.