- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Steplist
Component status | Contribution |
---|---|
Current version | @spectrum-css/steplist@5.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/steplist@6.0.0-s2-foundations.15 |
Released | October 4, 2024 |
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.
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.
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>