# Steps

A numbered sequence, as a rail — one thing after another, with a rule through them.

- Group: Display
- Import: `import { Steps } from '@misoto22/folio'`
- Page: https://ui.misoto22.com/components/steps/
- Related: diagram, article

## When to reach for it

A pipeline, a migration, a recipe: an order with no branches. The moment something forks or points at something else it is a Diagram, and drawing a fork as a list hides it.

## Anatomy

- **Rail** (required) — The <ol>, carrying --step-size — one number that three rules read: the marker’s own box, where the connector starts, and where it is centred.
- **Marker** (required) — A 2rem circle per step, aria-hidden: the position number, or a blank hairline node when marker is "rule". Filled with --accent for the current one.
- **Connector** — A hairline drawn on every item but the last, placed absolutely from the foot of that marker to the foot of its row — so it spans the gap rather than running behind the markers, and no tail hangs off the end of the sequence.
- **Title** (required) — step.title, at 15px in the interface face. The step’s name — a noun, not a description of what happens in it.
- **Note** — step.note, a mono line under the title: what the step is made of, what it costs, what it uses.

## Best practices

### Do

- Use marker="rule" for a sequence of states. “Queued, running, done” is an order rather than an instruction list, and a digit in front of each one tells the reader they are steps to perform.
- Mark at most one step current: it is the one thing the rail states rather than draws, and two filled markers put the process in two places at once.
- Pass label when no heading names the sequence — it is the list’s only name, so without it the rail is announced as five items belonging to nothing.
- Retune the rail through --step-size on the list rather than by restyling the marker: the marker box, the connector’s start and its centring all read that one number, and moving one of the three leaves the line beginning in mid-air.

### Don’t

- A fork drawn here is a fork the reader never sees. The connector runs from each step to the next one in the array and to nothing else, so two branches flatten into four consecutive steps and the choice between them leaves the figure entirely.
- steps={[]} renders null rather than an empty rail, so a list filtered down to nothing leaves a heading standing over a gap unless the call site checks the length itself.
- Nothing here is clickable and the props spread onto the <ol>, so an onClick meant for a step lands on the whole list. A sequence the reader is meant to move through is a Breadcrumb or a Tabs.

## 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.

## Steps

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

- `steps` (required) — `Step[]`.
- `label` — `string`. Names the sequence for assistive tech when no heading does.
- `marker` — `'number' | 'rule'` default `'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: `Omit<HTMLAttributes<HTMLOListElement>, 'children'>`.

## Example — default

```tsx
import { Steps } from '@misoto22/folio'

<Steps
  label="How an answer is built"
  steps={[
    { title: 'Corpus', note: 'Blog MDX · project database · profile' },
    { title: 'Chunking', note: 'By heading · 300–800 tokens' },
    { title: 'Embedding', note: 'Voyage 3.5-lite · 1024 dimensions' },
    { title: 'Storage', note: 'pgvector — the site’s own database' },
    { title: 'Retrieval', note: 'Top 5 by cosine · 0.2 floor' },
    { title: 'Answer', note: 'Reasoning filtered · live citations', current: true },
  ]}
/>
```

## Example — states not instructions

```tsx
import { Steps } from '@misoto22/folio'

<Steps
  label="Release 0.4.1"
  marker="rule"
  steps={[
    { title: 'Queued', note: 'Behind one earlier build' },
    { title: 'Building', note: 'pnpm build · 1m 20s so far', current: true },
    { title: 'Published', note: 'npm registry, then the docs site' },
  ]}
/>
```

## Example — notes that carry code

```tsx
import { Code, Steps } from '@misoto22/folio'

<Steps
  label="Adding the package to an app"
  steps={[
    { title: 'Install', note: <Code>pnpm add @misoto22/folio</Code> },
    { title: 'Import the stylesheet', note: <Code>@misoto22/folio/styles.css</Code> },
    { title: 'Render', note: <Code>{'<Button>Save</Button>'}</Code>, current: true },
  ]}
/>
```