chrome

<tc-stepper>

Multi-step indicator for wizards, onboarding, and checkout. Horizontal or vertical, optional click-to-jump.

import "@ra9/tan-compose-kit/stepper"

Props

Name	Type	Default	Description
`steps`	`Array<{ id?: string; title: string; description?: string }>`	`[]`	Steps to render. Pass as a JSON-encoded attribute or set the property directly.
`active`	`number`	`0`	Zero-based index of the current step. Reflects to `active` attribute.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout axis.
`clickable`	`boolean`	`false`	Render steps as buttons users can click to jump to.

Events

Event	Detail	When
`tc-step-change`	`{ active: number, previous: number }`	Fires when a clickable step is selected.

CSS variables

Variable	Default	Description
`--tc-stepper-ink`	`var(--tc-color-ink, #14171f)`	Title color.
`--tc-stepper-soft`	`var(--tc-color-ink-soft, #4a5061)`	Description / upcoming-step color.
`--tc-stepper-accent`	`var(--tc-color-accent, #a16939)`	Current step marker color.
`--tc-stepper-done`	`var(--tc-color-success, #2f7a52)`	Completed step marker fill.
`--tc-stepper-rule`	`var(--tc-color-rule, #ece5d3)`	Connector / upcoming marker border.
`--tc-stepper-marker-size`	`28px`	Diameter of the step marker.

Examples

Horizontal

<tc-stepper active="1" steps='[ {"title":"Account","description":"Email & password"}, {"title":"Profile","description":"Name & avatar"}, {"title":"Workspace","description":"Invite team"}, {"title":"Done"} ]' ></tc-stepper>

Vertical

<tc-stepper orientation="vertical" active="2" steps='[ {"title":"Order placed","description":"Mar 4"}, {"title":"Picked","description":"Mar 5"}, {"title":"Out for delivery","description":"Today"}, {"title":"Delivered"} ]' ></tc-stepper>

Clickable

clickable turns each step into a <button> and emits tc-step-change. Use it when the user can freely navigate (e.g., a settings wizard with reviewable steps).

<tc-stepper id="wiz" clickable active="0" steps='[…]'></tc-stepper> <script> document.getElementById("wiz").addEventListener("tc-step-change", (e) => { console.log("user jumped to:", e.detail.active); }); </script>

Driving from JS

const stepper = document.querySelector("tc-stepper"); function next() { if (stepper.active < stepper.steps.length - 1) stepper.active++; } function back() { if (stepper.active > 0) stepper.active--; }

Accessibility

Rendered as an ordered list (<ol>) with each step as a list item. The list carries aria-label="Progress".
The current step's row has aria-current="step".
For non-clickable steppers, steps are static text (no fake-button confusion). When clickable is true, steps are real buttons and keyboard reachable.
For long-form wizards, pair with a live region that announces "Step 2 of 4: Profile" when the active step changes — the stepper itself is decorative.

Theming

<tc-stepper steps='[…]' active="1" style=" --tc-stepper-accent: #5b6cf0; --tc-stepper-done: #0e9f6e; --tc-stepper-marker-size: 32px; --tc-stepper-rule: #d0d5f0; " ></tc-stepper>

← All components