PrimitivesProgressStep rail

Step rail

The vertical 'where am I' rail beside a multi-step flow — a numbered node per section, each naming its section and each a way back to one already passed.

<koala-step-rail>

Step rail

Four node states: done, needs a detail, active, upcoming

Step 2 is unfinished — behind the reader and still missing something — which is the state a plain "done or not" stepper cannot say. A section with more than one step carries them as children, numbered from their position. The remove control appears only on a removable child, only when the rail is given child-remove, and only on hover or keyboard focus; a pointer-less device shows it always.

Which stepper is this

koala-stepper is the horizontal server-rendered one across the top of a form. koala-stepper-dots reports a stage in 175px. koala-stepper-chain is the vertical timeline of stage cards on a view page. This one is a navigation rail, driven entirely from client state, whose nodes are controls and whose sections can carry substeps.

Progress round the node

progress="true"

An unfinished step fills an arc round its node, clockwise from the top, by its progress. Off by default; a done, active or upcoming node looks as it does without it.

API

steps Alpine expression yielding the step array

select Alpine expression run on a step node; the loop variable is step

child-select Alpine expression run on a substep; the loop variable is child

child-remove Alpine expression; setting it is what puts the remove control on a removable child

active-icon IconName, e.g. Pencil; drawn in place of the number on the active node. Unset keeps the number

child-add Alpine expression; setting it is what puts an add row below the last child of a section whose canAdd is true

progress bool, default false; an arc round an unfinished node filled by step.progress (0 to 100)

aria-label string

data-analytics dotted base intent; renders base.select on a step, base.child.select on a substep, base.add and base.remove

step object key, number, label, status?, done, unfinished, active, clickable, last, progress?, children?, canAdd?, addLabel?

child object key, label, done, unfinished, active, clickable, removable?, removeLabel?