Stepper

A stage stepper: step children joined by hairline connectors, with active naming the current step index — earlier steps render completed (a check indicator), later ones pending, and an index past the last step renders every step completed. Display-only: driving active belongs to the app model. Step children are text leaves only (the label supports {} interpolation); their completed/active/pending state derives entirely from the stepper's active index. For a vertical run ledger, see timeline.

stepper

Markup

active is required — a number or one {binding}.

<stepper active="{publish_step}">
  <step>Draft</step>
  <step>Review</step>
  <step>Publish</step>
</stepper>

Zig builder

ui.stepper(.{ .active = model.publish_step }, &.{
    .{ .label = "Draft" },
    .{ .label = "Review" },
    .{ .label = "Publish" },
})

Eject

When theming is not enough and you need to own the stepper’s shape, eject it: the canonical source lands in your project as your code — SDK updates never touch it, and ejecting twice errors instead of overwriting your edits. stepper ejects as a Zig view function (src/components/stepper.zig).

native eject component stepper

The ownership model and what to do after ejecting are in Use, eject, or build.

Attributes