Steps
A horizontal step indicator for a linear flow: done, current, and upcoming at a glance.
Live demo
Steps shows where a user is in a linear process: a checkout, an onboarding wizard, a multi-part form. Author a semantic ordered list of <li> steps and it splits them by the current index: everything before it is done (a filled marker with a check), the one at it is current (an outlined marker, flagged with aria-current), and everything after is upcoming (a muted, numbered marker).
A connector track fills in behind the markers up to the current step. The marker and the connector are real nodes rendered by the component's fill, not glyphs painted onto the author's markup, so a mod can put an icon in the marker, number the steps in roman, or draw the connector as a dashed arrow — while each step's own content is relocated into the marker's label region untouched, and the rendered list stays a semantic <ol> screen readers hear in order.
When to use
How this component composes with the rest of the set.
current from the same state that gates a wizard's Next button, so the marker moves as the user advances. current changes. component.steps can swap the check for an icon, number the steps in roman, or draw the connector as a dashed arrow, without the app changing a line. Props
2 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
States
done
A completed step: an accent-filled marker whose glyph is a check, and a filled connector into it.
current
The active step: an accent-outlined marker and an emphasized label, carrying aria-current.
upcoming
A step not yet reached: a muted, numbered marker on the unfilled track.
Anatomy
The named parts that make up the component, with their selectors.
list
The rendered ordered list, laid out as an even horizontal row of steps.
step
One step: its marker over its label, joined to the previous step by the connector track. Carries any attributes the author put on the source <li>.
marker
The circular step marker: an ordinal when upcoming, a check when done, an accent outline when current. A real node, so a mod can replace the glyph with an icon or a different numbering.
connector
The track joining a step back to the one before it — accent-filled up to the current step, --line beyond it. The first step has none.
label
The region each step's authored content is relocated into, beneath its marker.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-fg
--accent-text
--bg-0
--bg-1
--border-thick
--fg-0
--fg-1
--fg-2
--font-sans
--line
--radius-full
--space-2
--text-sm
--weight-medium
--weight-semibold
Slots
The ordered list. Provide an <ol> (or <ul>) whose <li> children are the steps, in order. Each step's content is relocated into the rendered marker's label region, and any attributes on the source <li> ride along onto the rendered step.
Accessibility
aria-current="step" so it is announced as the active one. aria-hidden, so the step's own content is the only thing announced. Code
Checkout flow
Four steps with the second active; the first is done and the rest are upcoming.
<xtyle-steps current="1">
<ol>
<li>Cart</li>
<li>Shipping</li>
<li>Payment</li>
<li>Review</li>
</ol>
</xtyle-steps><script lang="ts">
import { Steps } from "@xtyle/svelte";
let current = $state(1);
const labels = ["Cart", "Shipping", "Payment", "Review"];
</script>
<Steps {current}>
<ol>
{#each labels as label (label)}<li>{label}</li>{/each}
</ol>
</Steps>---
import Steps from "@xtyle/astro/Steps.astro";
---
<Steps current={1}>
<ol>
<li>Cart</li>
<li>Shipping</li>
<li>Payment</li>
<li>Review</li>
</ol>
</Steps>