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.

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

aria-label string

data-analytics dotted literal for the step node

child-analytics dotted literal for the substep control

remove-analytics dotted literal for the remove control

add-analytics dotted literal for the add control

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

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