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, it's an alternative to wizard.

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 need to add some javascript for different state (eg: focus, pressed, etc) to behave and work as recommended.

Wizards with free navigation 

					

<!-- '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-selected="true" 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-disabled="true" 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-selected="true" 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-disabled="true">Disabled item</button>
   ...
</div>

Wizard with restricted navigation

Add .visited class for the wizard items that are before the selected/active ones.

					


<div class="wizard">
   <button type="button" class="wizard-item visited" tabindex="-1" aria-disabled="true">Visited</button>
   <button type="button" class="wizard-item visited" tabindex="-1" aria-disabled="true">Visited</button>
   <button type="button" class="wizard-item active" aria-selected="true" 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-disabled="true" aria-label="Disabled state">Disabled item</button>
   ...
</div>