Register

Form wizard

A long form in steps, one screen at a time

Wizard

Next and Back move between the steps; the list shows where you are.

  1. 1. Details
  2. 2. Terms
  3. 3. Products
  4. 4. Check

The supplier

Show the code
<section class="stack w-100" data-wizard aria-label="Add a supplier">
<ol class="steps">
<li aria-current="step">1. Details</li>
<li>2. Terms</li>
<li>3. Products</li>
<li>4. Check</li>
</ol>
<div data-step>
<h3 class="title-3">The supplier</h3>
<div class="form-grid two mt-2">
<div class="field">
<label class="label" for="fw-n">Name</label>
<div class="input">
<input id="fw-n" name="fw-n" type="text" value="Casco Bay Ice">
</div>
</div>
<div class="field">
<label class="label" for="fw-c">Contact</label>
<div class="input">
<input id="fw-c" name="fw-c" type="text" value="Carla Mendes">
</div>
</div>
<div class="field">
<label class="label" for="fw-e">Email</label>
<div class="input">
<input id="fw-e" name="fw-e" type="email" value="carla@cascobayice.example">
</div>
</div>
<div class="field">
<label class="label" for="fw-p">Phone</label>
<div class="input">
<input id="fw-p" name="fw-p" type="tel" value="(207) 555-0123">
</div>
</div>
</div>
<div class="cluster justify-end mt-4">
<button type="button" class="btn btn-primary" data-next>Next: terms<i class="ti ti-arrow-right">
</i>
</button>
</div>
</div>
<div data-step hidden>
<h3 class="title-3">Terms</h3>
<div class="form-grid two mt-2">
<div class="field">
<label class="label" for="fw-t">Payment terms</label>
<select class="input" id="fw-t" name="fw-t">
<option value="Net 7">Net 7</option>
<option value="Net 14">Net 14</option>
<option value="Net 30">Net 30</option>
<option value="Cash on delivery">Cash on delivery</option>
</select>
</div>
<div class="field">
<label class="label" for="fw-d">Delivers on</label>
<select class="input" id="fw-d" name="fw-d">
<option value="Mondays and Thursdays">Mondays and Thursdays</option>
<option value="Every day">Every day</option>
<option value="On request">On request</option>
</select>
</div>
</div>
<div class="cluster justify-end mt-4">
<button type="button" class="btn" data-back>
<i class="ti ti-arrow-left">
</i>Back</button>
<button type="button" class="btn btn-primary" data-next>Next: products<i class="ti ti-arrow-right">
</i>
</button>
</div>
</div>
<div data-step hidden>
<h3 class="title-3">What they supply</h3>
<div class="stack tight mt-2">
<label class="choice" for="fw-i1">
<input type="checkbox" id="fw-i1" checked>
<span class="box">
<i class="ti ti-check">
</i>
</span>Ice, 10 lb bag</label>
<label class="choice" for="fw-i2">
<input type="checkbox" id="fw-i2">
<span class="box">
<i class="ti ti-check">
</i>
</span>Dry ice</label>
</div>
<div class="cluster justify-end mt-4">
<button type="button" class="btn" data-back>
<i class="ti ti-arrow-left">
</i>Back</button>
<button type="button" class="btn btn-primary" data-next>Next: check<i class="ti ti-arrow-right">
</i>
</button>
</div>
</div>
<div data-step hidden>
<h3 class="title-3">Check and add</h3>
<dl class="dl">
<div>
<dt>Supplier</dt>
<dd>Casco Bay Ice</dd>
</div>
<div>
<dt>Contact</dt>
<dd>Carla Mendes</dd>
</div>
<div>
<dt>Terms</dt>
<dd>Net 7</dd>
</div>
</dl>
<div class="cluster justify-end mt-4">
<button type="button" class="btn" data-back>
<i class="ti ti-arrow-left">
</i>Back</button>
<button type="button" class="btn btn-primary" data-toast="Casco Bay Ice added.">
<i class="ti ti-check">
</i>Add supplier</button>
</div>
</div>
</section>