Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
progress-tracker
Multi-step progress bar for wizard / checkout / onboarding flows. Status per step (complete / current / upcoming / error). Distinct from
Overview
<progress-tracker> renders a horizontal multi-step progress indicator for wizards, checkout, onboarding, fulfillment status — anywhere a user moves through a sequence and may need to see where they are.
Author renders steps as <li data-step> children; the component decorates each with a numbered circle, connector line, and status (complete / current / upcoming / error). Step navigation is author-driven via the data-current attribute; with data-clickable, completed steps become clickable to navigate back.
When to use which primitive
| Use this | When |
|---|---|
<progress-tracker> | Multi-step linear progress (wizard, checkout, onboarding, order tracking). |
<slide-accept> | Slide-to-confirm UX. Different shape (single action, not multi-step). |
Native <progress> | Continuous progress (download, processing). progress-tracker is for discrete labelled steps. |
Author surface
4-step wizard at step 2
<progress-tracker data-current="2"> <li data-step="1">Account</li> <li data-step="2">Profile</li> <li data-step="3">Preferences</li> <li data-step="4">Confirm</li></progress-tracker>data-current can be a 1-based index ("2") or a step id ("profile"). Step ids are stable strings — useful when steps may be added or removed conditionally.
Status states
| Status | When | Visual |
|---|---|---|
complete | Step is before data-current | Filled green circle with ✓; connector to next step is green. |
current | Step matches data-current | Outlined accent circle with the step number; emphasized via ring. |
upcoming | Step is after data-current | Outlined muted circle with the step number; muted connector. |
error | Step has data-error regardless of position | Filled red circle with ! and red label. |
Step with error
<progress-tracker data-current="3"> <li data-step="1">Validate</li> <li data-step="2" data-error>Upload</li> <li data-step="3">Process</li> <li data-step="4">Complete</li></progress-tracker>Clickable steps
Set data-clickable to allow users to click on completed steps to navigate back. Forward navigation requires the wizard to set data-current after validation (the component does not let users skip ahead).
Wiring step clicks
const tracker = document.querySelector('progress-tracker'); tracker.addEventListener('progress-tracker:step', (e) => { const { step, previousStep, source } = e.detail; // source: 'click' (user clicked a completed step) or 'attr' (programmatic) if (source === 'click') { showStep(step); // restore form state for that step }}); // Programmatic forward navigation after validationfunction goToStep(stepId) { if (validateCurrentStep()) { tracker.setAttribute('data-current', stepId); }}Accessibility
- Host:
role="list"witharia-label="Progress"(override via the host'saria-label). - Each step:
role="listitem"; the active step also getsaria-current="step". - Per-step
aria-label: derived asStep N of M: <label> (<status>)
so AT users hear position + status in one announcement. - Clickable mode: roving tabindex — only the current step is in the tab sequence; arrow keys move the visual focus indicator to other steps. Click activation handled at the step level.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-current | string | 1 (first step) | 1-based index OR step id of the active step. |
data-clickable | boolean | false | Allow clicks on completed steps to navigate back. |
aria-label | string | Progress | List label. |
Per-step attributes (on <li data-step>)
| Attribute | Description |
|---|---|
data-step | Stable step id (typically a 1-based number; can be any string). |
data-error | Marks this step as errored regardless of position. |
Events
| Event | Bubbles | Detail |
|---|---|---|
progress-tracker:step | yes | { step, previousStep, source: 'attr'|'click' } |
CSS custom properties
| Property | Default | Purpose |
|---|---|---|
--pt-circle-size | 1.75rem | Diameter of the step circle. |
--pt-line-thickness | 2px | Connector line thickness. |
--pt-color-complete | --color-success | Fill / connector color for completed steps. |
--pt-color-current | --color-interactive | Outline / ring color for the active step. |
--pt-color-upcoming | --color-border | Outline / connector color for upcoming steps. |
--pt-color-error | --color-error | Fill color for errored steps. |
See also
<slide-accept>— slide-to-confirm UX (different shape).- Native
<progress>— continuous progress.