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>

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
Keep step labels brief
Link markers for completed steps back to the pages for those steps

Don't

Provide links to future steps before the user has completed the current step
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.