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

Stepper

Position in a sequence. koala-stepper for a horizontal step form, koala-stepper-chain for a vertical milestone timeline, koala-stepper-dots for a compact row of dots.

<koala-stepper>

Sequence

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

Dots

on-surface="Page" (default)
current=1
current=7 (complete)
selectable intent

Selected index: 1

Stepper API

model StepperModel

Chain API

stages StepperChainStage list
collapse-completed bool
total-duration string

Dots API

total int
current int
on-surface PageContainerInverseBrandBandTint
labels string list
states DoneCurrentUpcomingBlocked
selectable bool; emits koala-stepper-select with detail.index