Step indicator

Show the user's position in and progress through a multi-step process

Overview #

Use the step indicator component to show the user’s position in and progress through a multi-step process.

Step indicators are often used on application forms or workflow screens.

Examples #

Choose an example

<ol class="rvt-steps">
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Create username</span>
      <span class="rvt-steps__indicator"><span class="rvt-sr-only">Step</span> 1</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content" aria-current="step">
      <span class="rvt-steps__label">Personal information</span>
      <span class="rvt-steps__indicator">2</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Records and transcripts</span>
      <span class="rvt-steps__indicator">3</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Supporting documents</span>
      <span class="rvt-steps__indicator">4</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Confirmation</span>
      <span class="rvt-steps__indicator">5</span>
    </a>
  </li>
</ol>

Open in new window Copy link to example

<ol class="rvt-steps rvt-steps--vertical">
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Create username</span>
      <span class="rvt-steps__indicator"><span class="rvt-sr-only">Step</span> 1</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content" aria-current="step">
      <span class="rvt-steps__label">Personal information</span>
      <span class="rvt-steps__indicator">2</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Records and transcripts</span>
      <span class="rvt-steps__indicator">3</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Supporting documents</span>
      <span class="rvt-steps__indicator">4</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Confirmation</span>
      <span class="rvt-steps__indicator">5</span>
    </a>
  </li>
</ol>

Open in new window Copy link to example

<ol class="rvt-steps">
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Create username</span>
      <span class="rvt-steps__indicator rvt-steps__indicator--success"><span class="rvt-sr-only">Step</span> 1</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content" aria-current="step">
      <span class="rvt-steps__label">Personal information</span>
      <span class="rvt-steps__indicator">2</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Records and transcripts</span>
      <span class="rvt-steps__indicator rvt-steps__indicator--warning">3</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Supporting documents</span>
      <span class="rvt-steps__indicator rvt-steps__indicator--danger">4</span>
    </a>
  </li>
  <li class="rvt-steps__item">
    <a href="#" class="rvt-steps__item-content">
      <span class="rvt-steps__label">Confirmation</span>
      <span class="rvt-steps__indicator">5</span>
    </a>
  </li>
</ol>

Elements #

Element	Description	Usage	Required	Multiple
Step	Step to show in the process	Link back to previous steps, but avoid allowing the user to jump ahead to future steps	Step is required	Component may contain multiple Step
Step label	Text that appears next to the step indicator	Limit to a few words	Step label is required	Component may contain only one Step label
Step indicator	Circular marker that appears next to the step label	Highlight the marker for the current step. Don't use text for the label other than the step number.	Step indicator is required	Component may contain only one Step indicator

Usage #

Do

Use to show the user's position in a multi-step process
Use to split a long form across multiple pages
Use to reassure the user that they're making progress

Don't

Use for section navigation—use breadcrumbs, a sidenav, or a subnav instead
Use for normal lists—use the list component instead
Use to display a list of events in chronological order—use a timeline instead

Accessibility #

Avoid redundant “step” labels. Use the aria-hidden="true" attribute to hide elements with the .rvt_steps__indicator class from screen readers if the element with the .rvt_steps__label class already has the step number in it.