x-wizard.html

<div class="tailwind" x-data="{ age: 0, name: '', coppa: false }">
  <div class="border rounded-lg my-12 max-w-md">
    
    <div class="p-6">
      <h1
        class="mt-0"
        x-show="$wizard.current().title !== ''"
        x-text="$wizard.current().title"
      ></h1>
      
      <div x-cloak x-wizard:step x-wizard:title="Welcome">
        Welcome to my demo Alpine.js wizard! This is a step with no requirements,
        so you can continue with no interaction. That's useful for informational
        steps like an introduction.
      </div>
      
      <div
        x-cloak
        x-wizard:step="age > 0"
        x-wizard:title="Enter Your Age"
      >
        Your Age: <input x-model.number="age" class="border p-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" />
      </div>
      
      <div
        x-cloak
        x-wizard:step="coppa === true"
        x-wizard:title="Get Parent Consent"
        x-wizard:if="age < 13"
      >
        <label>
          <input type="checkbox" x-model="coppa" />
          I have my parent's consent to register
        </label>
      </div>
      
      <div
        x-cloak
        x-wizard:step="'' !== name"
        x-wizard:title="Enter Your Name"
      >
        Your Name: <input x-model="name" class="border p-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" />
      </div>
    </div>
    
    <div class="bg-blue-50 border-t p-6">
      <button
        x-cloak
        class="btn btn-gray btn-link"
        :disabled="$wizard.cannotGoBack()"
        @click="$wizard.back()"
      >
        <x-icon.fa.arrow-left />
        Back
      </button>
      
      <button
        x-cloak
        class="btn"
        x-show="$wizard.isNotLast()"
        :disabled="$wizard.cannotGoForward()"
        @click="$wizard.forward()"
      >
        <span x-text="'' === $wizard.next().title ? 'Continue…' : $wizard.next().title">Continue…</span>
        <x-icon.fa.arrow-right />
      </button>
      
      <button
        x-cloak
        class="btn btn-blue"
        x-show="$wizard.isLast()"
        :disabled="$wizard.isNotComplete()"
      >
        <x-icon.fa.check />
        Submit
      </button>
    </div>
  
  </div>

</div>