x-wizard.html

<form x-data="{ name: '', age: null, coppa: false }">
	
	<h1 x-text="$wizard.title"></h1>
	
	<div x-wizard:step>
		This step can be completed without doing anything. It's
		just informational.
	</div>
	
	<div
		x-wizard:step="age > 0"
		x-wizard:title="Enter Your Age"
	>
		Your Age: <input x-model.number="age" name="age" />
	</div>
	
	<div
		x-wizard:step="coppa === true"
		x-wizard:title="Get Parent Consent"
		x-wizard:if="age < 13"
	>
		<input type="checkbox" x-model="coppa" name="coppa" />
		I have my parent's consent to register
	</div>
	
	<div x-wizard:step="'' !== name">
		Your Name: <input x-model="name" name="name" />
	</div>
	
	<button x-show="$wizard.canGoForward" @click="$wizard.forward()">
		Next
	</button>
	
	<button x-show="$wizard.isComplete" type="submit">
		Submit
	</button>

</form>