Koala logo Design
Koala logo Design
Esc
No matches for “”
↑↓ navigate ↵ open Esc close
Components Steppers

Steppers

Multi-step progress indicator used in create flows. Completed steps show a check, the active step bounces on the brand colour, pending steps are muted. Collapses to a compact label on mobile.

<koala-stepper>

Canonical

  1. Completed: Property
  2. Current step: Contact
  3. Review

Three-step quote create. Completed steps render a check on a filled brand circle; the active step shows its icon on the brand colour with a subtle bounce; pending steps are muted on the surface container.

Variants

2 step counts
  1. Contact
  2. Review
Two-step
  1. Property
  2. Contact
  3. Review
Three-step

States

3 states
Completed
Active
Pending

Props

2 model fields
Model field Type Notes
CurrentStepint1-based index of the active step. Earlier steps render completed; later steps render pending.
StepsIReadOnlyList<StepperStep>Each step has a Label and pre-rendered IconHtml.

Do & don't

  1. 1
  2. 2
  3. 3
Do Three steps. Each one a meaningful chunk of the form. Three is the sweet spot — long enough to feel structured, short enough to finish.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
Don't Don't make a seven-step stepper. Users see the bar fill up too slowly and bail before step three.