Steps | Tuff Docs

Usage

Numeric keys infer completed steps from active; string keys need an explicit status.

Loading demo...

Use numeric keys for linear forms and onboarding so completion is inferred.
Use string keys for named workflows, and set completed or error status explicitly.
Disable steps that depend on unfinished prerequisites.
Keep the authoritative flow state in the parent; TxSteps is a progress cue, not the source of truth for a router or form.
Keep step descriptions short; put paragraphs or controls below the steps.

Prop	Type	Default	Description
`active`	`number \| string`	`0`	Active step key; changes sync to the internal state.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Size, passed down to child steps.

Slot	Props	Description
`default`	-	`TxStep` children.

Prop	Type	Default	Description
`title`	`string`	-	Step title.
`description`	`string`	-	Supporting text.
`icon`	`string`	-	Icon name or class shown before completion.
`status`	`'wait' \| 'active' \| 'completed' \| 'error'`	`'wait'`	Manual status; the active state and numeric completion take precedence.
`step`	`number \| string`	child order	Step key; defaults to the zero-based child order. String keys are numbered by order.
`clickable`	`boolean`	`true`	Renders a button head; a click updates the internal active step.
`disabled`	`boolean`	`false`	Disables the step button and blocks activation.
`showLine`	`boolean`	`true`	Renders the connector; the last step never has one.
`completedIcon`	`string`	`'check'`	Icon shown in the completed state.

TxSteps is role="list" and each TxStep is role="listitem"; the active step's head has aria-current="step".
A clickable head is a native <button type="button">, otherwise a <div>; a disabled step disables the button and ignores activation.
A click only updates the active step inside TxSteps; nothing is emitted and the parent isn't updated.
Numeric keys before a numeric active count as completed; string keys need status="completed".
Without step, a step registers in child order and uses its zero-based index as the key.
Under reduced motion, all motion stops and the state colors remain.

All motion is CSS: a completed marker swaps to a check, the connector sweeps to the next marker, and the new active marker pops in after it.
Source: packages/tuffex/packages/components/src/steps/.

packages/tuffex/packages/components/src/steps/index.ts