Version 3.0.6

Step Indicators

Step indicators display progress through a sequence by breaking it up into multiple logical and numbered steps. Avoid using steppers to break up sections in a short form, or multiple times on one page. Horizontal step indicators are ideal when the contents of one step depend on an earlier step. Avoid using long step names in horizontal steppers.

Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session. If the user cannot return to the step later, ensure that the original step does not appear as a clickable link.

Linear step indicators require users to complete one step in order to move on to the next.

                      
<ol class="steps">
<li class="step previous complete">
<a href="">Step 1</a>
</li>
<li class="step active">
<a href="">Step 2</a>
</li>
<li class="step">
<a href="" tabindex="-1">Step 3</a>
</li>
</ol>

Non-linear steppers allow users to enter a multi-step flow at any point.

                      
<ol class="steps can-skip">
<li class="step previous">
<a href="">Step 1</a>
</li>
<li class="step active">
<a href="">Step 2</a>
</li>
<li class="step">
<a href="">Step 3</a>
</li>
</ol>

Step validation can provide the user with feedback about the success or failure of any step. If at all possible, run validation on the step before the user continues and encourage the user to fix any errors before proceeding.

                      
<ol class="steps">
<li class="step complete">
<a href="">Step 1</a>
</li>
<li class="step previous invalid">
<a href="" aria-label="Relevant warning text here">Step 2</a>
</li>
<li class="step active">
<a href="">Step 3</a>
</li>
<li class="step">
<a href="" tabindex="-1">Step 4</a>
</li>
</ol>

Search Results

Powered by