Wizard

<div class="wizard" id="fw" data-wizard>
  <ol class="steps">
    <li aria-current="step">Details</li>
    <li>Shipping</li>
    <li>Payment</li>
  </ol>
  <section class="wizard-step" data-step="0" aria-label="Your details">
    <h3 class="wizard-title">Your details</h3>
    <div class="form-grid">
      <div><label class="form-label" for="fw-name">Name</label><input id="fw-name" name="fw-name" type="text" required class="form-control"></div>
      <div><label class="form-label" for="fw-email">Email</label><input id="fw-email" name="fw-email" type="email" required class="form-control"></div>
    </div>
  </section>
  <section class="wizard-step" data-step="1" hidden aria-label="Shipping">
    <h3 class="wizard-title">Shipping</h3>
    <div class="d-flex flex-column gap-3">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="fw-ship" id="fw-ship-0" checked><label class="form-check-label" for="fw-ship-0">Standard, free, 3 to 5 days</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="fw-ship" id="fw-ship-1"><label class="form-check-label" for="fw-ship-1">Express, $12, next day</label>
      </div>
    </div>
  </section>
  <section class="wizard-step" data-step="2" hidden aria-label="Payment">
    <h3 class="wizard-title">Payment</h3>
    <div>
      <label class="form-label" for="fw-card">Card number</label>
      <div class="field">
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
        <input id="fw-card" name="fw-card" type="text" placeholder="4242 4242 4242 4242" inputmode="numeric" data-mask="card">
      </div>
    </div>
  </section>
  <div class="wizard-foot">
    <button type="button" class="btn btn-ghost" data-wizard-back><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Back</button>
    <span class="wizard-count muted" aria-live="polite">Step 1 of 3</span>
    <button type="button" class="btn btn-primary" data-wizard-next>Next<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    <button type="button" class="btn btn-primary" data-toast='{"title":"Order placed","text":"You will get an email in a minute.","tone":"success"}' data-wizard-finish hidden><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Place order</button>
  </div>
</div>