Steps

current is the index of the step in progress. Everything before it is complete and gets a tick; everything after is still to come. The current one is marked aria-current="step", so it is announced as well as coloured.

Basic steps

steps({
  current: 1,
  items: [
    { title: 'Install' },
    { title: 'Write a page' },
    { title: 'Build' },
    { title: 'Deploy' },
  ],
})

With descriptions

steps({
  current: 2,
  items: [
    { title: 'Install', description: 'npm install -D sitelo' },
    { title: 'Write a page', description: 'src/index.ht.js' },
    { title: 'Build', description: 'sitelo build' },
    { title: 'Deploy', description: 'Publish dist/' },
  ],
})

Vertical

Better when the descriptions are longer than a few words.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Add the package', description: 'sitelo brings its own Vite, so there is nothing else to install.' },
    { title: 'Write a function that returns HTML', description: 'One file under src/ is a whole site.' },
    { title: 'Publish the output', description: 'dist/ is plain static files — any host will take them.' },
  ],
})

Nothing done yet

steps({ current: 0, items: ['Install', 'Configure', 'Deploy'] })

All done

Set current past the last index and every step reads as complete.

steps({ current: 3, items: ['Install', 'Configure', 'Deploy'] })

On a phone

A horizontal row has nowhere to go on a narrow screen, so it turns vertical on its own below 40rem — no prop needed. Narrow this window to see it.

Labelling it

The list is an <ol>, which already carries the order. Add label when the page has more than one set of steps and they need telling apart.

steps({
  label: 'Deployment progress',
  current: 1,
  items: ['Build', 'Upload', 'Invalidate cache'],
})

Advancing the flow

The state is three class names and one aria-current, spread across every step. setStep() moves them together, so a wizard that advances in the browser is one call rather than a loop.

An index past the last step leaves every one of them complete, which is what a finished flow looks like. Or from an event attribute, with nothing bundled:

button({ onclick: "import('/su/steps.js').then(m=>m.set('checkout',2))" }, 'Next')

Or from your own module, when there is already one running:

import { setStep } from 'sitelo/ui/client'

setStep('checkout', 2)

Props