Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesProgressTask steps

Task steps

A numbered column of tasks someone works through from the top: one node per task on a single line, with the caller's own card beside each.

<koala-task-steps>

Task steps

Every node state: done, next, ready, attention, locked
  1. 2 done Your personal details, terms of engagement
  2. Up next

    Pay for your searches

    We order your local searches as soon as this is paid.

  3. Check your ID Carry on with the secure link in your text.
  4. Tell us about your home Your conveyancer will be in touch about what happens next.

  5. Book your welcome call

    Opens once you've paid for your searches.

The list draws only the nodes and the line between them. Whatever sits beside a node is the caller's: the up-next card, a row that opens the task, or a locked line saying what opens it. The line is tinted below a done or next step and plain elsewhere.

Which stepper is this

koala-step-rail is navigation beside a flow, its nodes the controls. koala-stepper-chain is a read-only milestone timeline drawn from a model. This one holds the caller's own content, so each step can be a card, a link or a sheet trigger with its own analytics.

API

koala-task-steps aria-label string; names the list
koala-task-step state DoneNextReadyAttentionLocked; default Ready
koala-task-step number int; the number on the node. A done step shows a tick instead
Open