Wizard

Wizards lead a user through a process step by step. They contain a series of single-step screens, and are often used for setup and configuration tasks. Read more about wizards in the UX Guidelines.
Also you can check out the stepper.

Use when

  • The user needs guidance through a multi-step process, for instance if it's a low frequency task or the steps to take are unclear
  • Steps have to be done in a specific order
  • The task has a clear start and end

Design

Wrap all the items from your wizard in .wizard and each item in a or button tags with the .wizard-item.

If the wizard items are different for a or button tags You will need to be added some javascript functionality for different state (eg: focus, etc) to behave and function as the one recomanded.

Wizards with free navigation

Wizard with restricted navigation

Add .visited class for the wizard elements that precede the selected/active one.


				
<!-- 'a' tag version -->
<div class="wizard">
   <a href="#!" class="wizard-item" aria-label="Normal state">Normal item</a>
   <a href="#!" class="wizard-item active" aria-label="Selected state">Active/Selected item</a>
   <a href="#!" class="wizard-item" aria-label="Normal state">Normal item</a>
   <a href="#!" class="wizard-item disabled" tabindex="-1" aria-label="Disabled">Disabled item</a>
   ...
</div>


<!-- 'button' tag version -->
<div class="wizard">
   <button type="button" class="wizard-item" aria-label="Normal state">Normal</button>
   <button type="button" class="wizard-item active" aria-label="Selected">Selected item</button>
   <button type="button" class="wizard-item" aria-label="Normal state">Normal item</button>
   <button type="button" class="wizard-item" disabled tabindex="-1">Disabled item</button>
   ...
</div>


<!-- Wizard - Restricted Navigation -->
<div class="wizard">
   <button type="button" class="wizard-item visited" tabindex="-1">Visited</button>
   <button type="button" class="wizard-item visited" tabindex="-1">Visited</button>
   <button type="button" class="wizard-item active" aria-label="Selected">Selected item</button>
   <button type="button" class="wizard-item" aria-label="Normal state">Normal item</button>
   <button type="button" class="wizard-item disabled" tabindex="-1" aria-label="Disabled state">Disabled item</button>
   ...
</div>