Feedback/DSStepIndicator

DSStepIndicator

feedback
since 1.2.0

Horizontal progress bar showing current step in a multi-step process.

iOSmacOS

Purpose

Use for onboarding flows, multi-step forms, or wizards. Shows progress and current step name.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
stepsreq[String]—Array of step names
currentIndexreqBinding<Int>—Binding to current step index (0-based)

Examples

Onboarding flow

Show progress through onboarding steps.

swift
@State var currentStep = 0

VStack {
    DSStepIndicator(
        steps: ["Welcome", "Profile", "Preferences", "Done"],
        currentIndex: $currentStep
    )
    
    // Step content here
    
    DSButton("Next") {
        if currentStep < 3 { currentStep += 1 }
    }
}

Usage Guidelines

  • Use for 3-7 steps; more steps consider alternative UI
  • Keep step names short (1-2 words)
  • Always show total number of steps
  • Animate transitions between steps

Related Components

ProgressBarOnboardingFlow