Multi-Step Form Wizard

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex uk-flex-middle">
  <div class="uk-container uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-card uk-card-default uk-padding-small uk-border-rounded">
      
      
      <ul class="uk-stepper" uk-tab>
        <li class="uk-active"><a href="#">Step 1</a></li>
        <li><a href="#">Step 2</a></li>
        <li><a href="#">Step 3</a></li>
      </ul>
      <ul class="uk-switcher uk-margin">
        <li>
          <input class="uk-input" type="text" placeholder="Enter your name">
          <button class="uk-button uk-button-primary" onclick="UIkit.tab('.uk-stepper').show(1)">Next</button>
        </li>
        <li>
          <input class="uk-input" type="email" placeholder="Enter your email">
          <button class="uk-button uk-button-default" onclick="UIkit.tab('.uk-stepper').show(0)">Back</button>
          <button class="uk-button uk-button-primary" onclick="UIkit.tab('.uk-stepper').show(2)">Next</button>
        </li>
        <li>
          <p>Confirm and submit</p>
          <button class="uk-button uk-button-default" onclick="UIkit.tab('.uk-stepper').show(1)">Back</button>
          <button class="uk-button uk-button-primary">Submit</button>
        </li>
      </ul>
      
      
    </div>
  </div>
</div>

Information

Detailed overview of a selected code snippet

yaneony

23.05.2025, 13:25:50

23.05.2025, 13:46:09

uk-active, uk-border, uk-button, uk-card, uk-container, uk-flex, uk-input, uk-margin, uk-padding, uk-stepper, uk-switcher, uk-tab

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!