---
title: Stepper
url: "https://native-sdk.dev/docs/components/stepper"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `stepper` to display progress through stages. Its `step` children contain text labels. `active` identifies the current index: earlier stages display a checkmark, later stages remain pending, and an index beyond the last stage marks all stages complete. The model controls `active`; the stepper has no input events. For vertical events, see [timeline](/docs/components/timeline).

## Markup

`active` is required — a number or one `{binding}`. The component is also ejectable as a markup template when you need to own its shape.

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

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

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

## Eject

Use the eject command to copy stepper into your project when you need to change its structure. SDK updates preserve your copy. The command refuses to overwrite an existing file.

`stepper` ejects as a markup template (`src/components/stepper.native`).

```sh
native eject component stepper
```

The ownership model and what to do after ejecting are in [Use, eject, or build](/docs/building-components#use-eject-or-build).

## Attributes

| Attribute    | Description                                                                                                                                                        |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `active`     | stepper: the active step index (a number or one \{binding}); earlier steps render completed, later ones pending. Required.                                         |
| `key`        | Sibling-scoped identity key.                                                                                                                                       |
| `global-key` | Parent-independent identity: ids survive reparenting between containers.                                                                                           |
| `label`      | Accessible name; when set it REPLACES the element's text as the announced name - screen readers and automation snapshots see the label, never the text it shadows. |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)