Multi-Step Wizard

<div data-component="signup-wizard">
    <!-- Step indicators -->
    <div class="wizard-steps">
        <div data-bind-class="currentStep >= 1
            ? (currentStep > 1 ? 'step completed' : 'step active')
            : 'step'">1. Account</div>
        <div data-bind-class="...">2. Profile</div>
        <div data-bind-class="...">3. Confirm</div>
    </div>

    <!-- Step 1 -->
    <div data-show="currentStep === 1">
        <form data-validate-on="blur" novalidate>
            <input type="email" data-model="email" required>
            <span data-error-for="email" style="display: none"></span>
            <input type="password" data-model="password" required minlength="6">
            <span data-error-for="password" style="display: none"></span>
            <button type="button" data-action="nextStep"
                    data-event-if="email && password.length >= 6">Next</button>
        </form>
    </div>

    <!-- Step 2 -->
    <div data-show="currentStep === 2">
        <input data-model="displayName" data-model-trim>
        <select data-model="role">...</select>
        <button data-action="prevStep">Back</button>
        <button data-action="nextStep">Next</button>
    </div>

    <!-- Step 3: Confirm -->
    <div data-show="currentStep === 3">
        <p>Email: <span data-bind="email"></span></p>
        <p>Name: <span data-bind="displayName"></span></p>
        <button data-action="submitWizard">Create Account</button>
    </div>
</div>

<script>
wildflower.component('signup-wizard', {
    state: {
        currentStep: 1, submitted: false,
        email: '', password: '',
        displayName: '', role: 'developer'
    },
    nextStep() { this.currentStep++; },
    prevStep() { this.currentStep--; },
    submitWizard() { this.submitted = true; }
});
</script>