Wizard Showcase

A multi-step form workflow:

Form wizard with 4 steps (Info → Upload → Review → Done)
File upload with drag-and-drop
Progress indicators
Split button for save options
Confirmation dialog

Features Demonstrated

CSS: buttons, inputs, progress-bar, form-field
Web Components: <dsx-form-wizard>, <dsx-file-upload>, <dsx-split-button>, <dsx-dialog>

Live Demo

See examples/showcases/wizard/index.html for the full working demo.

Pattern Summary

<dsx-form-wizard linear>
  <dsx-wizard-step label="Personal Info" completed>
    <div class="dsx-grid dsx-grid--cols-2 dsx-gap-4">
      <div class="dsx-field">
        <label class="dsx-field__label">First Name</label>
        <input class="dsx-input">
      </div>
      <!-- more fields -->
    </div>
  </dsx-wizard-step>

  <dsx-wizard-step label="Documents">
    <dsx-file-upload accept=".pdf,.docx" multiple max-size="10MB">
    </dsx-file-upload>
  </dsx-wizard-step>

  <dsx-wizard-step label="Review">
    <!-- Summary of entered data -->
  </dsx-wizard-step>

  <dsx-wizard-step label="Complete">
    <div class="dsx-infobox dsx-infobox--success">
      <p>Application submitted successfully!</p>
    </div>
  </dsx-wizard-step>
</dsx-form-wizard>

<dsx-split-button label="Submit" variant="primary">
  <dsx-split-option value="submit-close">Submit & Close</dsx-split-option>
  <dsx-split-option value="submit-new">Submit & New</dsx-split-option>
</dsx-split-button>