• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Steplist

Component status
Contribution
Current version@spectrum-css/steplist@4.1.4
ReleasedMarch 7, 2024
View repository
GitHub
View package
npm

Variants

Standard (static)
Contribution

A basic steplist.

Show markup
<div class="spectrum-Steplist spectrum-Steplist--small" role="list">
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4" aria-label="Step 1">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4" aria-label="Step 2">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step" aria-label="Step 3">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4" aria-label="Step 4">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

Standard (interactive)
Contribution

A basic interactive steplist.

Show markup
<div class="spectrum-Steplist spectrum-Steplist--small spectrum-Steplist--interactive" role="list">
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1" aria-label="Step 1">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1" aria-label="Step 2">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4">
    <a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step" aria-label="Step 3">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
    <a class="spectrum-Steplist-link" role="link" tabindex="-1" aria-label="Step 4">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

With label (static)
Contribution

A static steplist with labels.

Step 1
Step 2
Step 3
Step 4
Show markup
<div class="spectrum-Steplist" role="list">
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
    <span class="spectrum-Steplist-label">Step 1</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
    <span class="spectrum-Steplist-label">Step 2</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step">
    <span class="spectrum-Steplist-label">Step 3</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
    <span class="spectrum-Steplist-label">Step 4</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

With label (interactive)
Contribution

An interactive steplist with labels.

Step 1
Step 2
Step 3
Step 4
Show markup
<div class="spectrum-Steplist spectrum-Steplist--interactive" role="list">
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
      <span class="spectrum-Steplist-label">Step 1</span>
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
      <span class="spectrum-Steplist-label">Step 2</span>
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected" role="listitem" aria-posinset="3" aria-setsize="4">
    <a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step">
      <span class="spectrum-Steplist-label">Step 3</span>
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item" role="listitem" aria-posinset="4" aria-setsize="4">
    <a class="spectrum-Steplist-link" role="link" tabindex="-1">
      <span class="spectrum-Steplist-label">Step 4</span>
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Steplist-marker"></span>
      </span>
    </a>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

With tooltip (static)
Contribution

A static steplist with tooltips.

Static variant

Step 1
Step 2
Step 3
Step 4
Show markup
<h3 class="spectrum-Heading spectrum-Heading--sizeXXS">Static variant</h3>

<div class="spectrum-Steplist" role="list">
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 1</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 2</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-selected u-tooltip-showOnHover" role="listitem" aria-posinset="3" aria-setsize="4" aria-current="step">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 3</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover" role="listitem" aria-posinset="4" aria-setsize="4">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 4</span>
        <span class="spectrum-Tooltip-tip"></span>
      </span>
      <span class="spectrum-Steplist-marker">
      </span>
    </span>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
</div>

With tooltip (interactive)
Contribution

An interactive steplist with tooltips.

Step 1
Step 2
Step 3
Step 4
Show markup
<div class="spectrum-Steplist spectrum-Steplist--interactive" role="list">
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Tooltip spectrum-Tooltip--top">
          <span class="spectrum-Tooltip-label">Step 1</span>
          <span class="spectrum-Tooltip-tip"></span>
        </span>
        <span class="spectrum-Steplist-marker">
        </span>
      </span>
    </a>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="2" aria-setsize="4">
    <a class="spectrum-Steplist-link is-complete" role="link" tabindex="-1">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Tooltip spectrum-Tooltip--top">
          <span class="spectrum-Tooltip-label">Step 2</span>
          <span class="spectrum-Tooltip-tip"></span>
        </span>
        <span class="spectrum-Steplist-marker">
        </span>
      </span>
    </a>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-selected u-tooltip-showOnHover" role="listitem" aria-posinset="3" aria-setsize="4">
    <a class="spectrum-Steplist-link is-selected" role="link" tabindex="0" aria-current="step">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Tooltip spectrum-Tooltip--top">
          <span class="spectrum-Tooltip-label">Step 3</span>
          <span class="spectrum-Tooltip-tip"></span>
        </span>
        <span class="spectrum-Steplist-marker">
        </span>
      </span>
    </a>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover" role="listitem" aria-posinset="4" aria-setsize="4">
    <a class="spectrum-Steplist-link" role="link" tabindex="-1">
      <span class="spectrum-Steplist-markerContainer">
        <span class="spectrum-Tooltip spectrum-Tooltip--top">
          <span class="spectrum-Tooltip-label">Step 4</span>
          <span class="spectrum-Tooltip-tip"></span>
        </span>
        <span class="spectrum-Steplist-marker">
        </span>
      </span>
    </a>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
</div>