Display
Steps
A numbered sequence, as a rail — one thing after another, with a rule through them.
When to reach for it
Examples
default
- Corpus
- Chunking
- Embedding
- Storage
- Retrieval
- Answer
Notes
A numbered sequence, as a rail.
The shape a pipeline actually has: one thing after another, each with a name and a line of detail, and a rule running through them so the eye reads them as one process rather than as five unrelated rows. It is the figure a technical post reaches for most often after a diagram, and it is NOT a diagram — nothing branches, nothing points at anything, and drawing it with boxes and arrows says otherwise.
The connector is drawn on the ITEM rather than as a full-height line behind the markers, so it starts under one and stops above the next instead of running through both — and so the last step has no tail hanging off it. That is the detail that separates a rail from a list with a border on it.
An <ol>, because the order is the content. aria-current="step" marks the filled one, which is the only thing here a screen reader could not otherwise infer from the order it is read in.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stepsrequired | Step[] | — | |
| label | string | Names the sequence for assistive tech when no heading does. | |
| marker | 'number' | 'rule' | 'number' | How the marker is drawn. `number` counts from one and is right for a pipeline, a recipe, a migration. `rule` drops the digit for a plain hairline node, which is what a sequence of states wants — "queued, running, done" is an order, not a numbered list. |
Also accepts everything in Omit<HTMLAttributes<HTMLOListElement>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- An <ol>, because the order IS the content — a stack of divs says nothing about sequence.
- aria-current="step" marks the filled one, which is the only thing here a reader could not infer from the reading order.
- The markers and the connector are aria-hidden: the number is the list position, and screen readers already announce that.