---
title: "Steps component | zenit Zig UI"
description: "Done, current and pending states of a multi-stage task. Horizontal and vertical layouts share the current index and completion icons."
url: https://ui.surf/zenit/components/steps
language: en
alternate_zh: https://ui.surf/zenit/zh/components/steps.md
alternate_es: https://ui.surf/zenit/es/components/steps.md
alternate_ja: https://ui.surf/zenit/ja/components/steps.md
alternate_ko: https://ui.surf/zenit/ko/components/steps.md
alternate_fr: https://ui.surf/zenit/fr/components/steps.md
alternate_de: https://ui.surf/zenit/de/components/steps.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Steps

`ui.widgets.Steps`

Done, current and pending states of a multi-stage task.

[Video](https://ui.surf/zenit/media/stories/steps.mp4?v=96584e2867)

**BEHAVIOR CONTRACT**

Horizontal and vertical layouts share the current index and completion icons.

**RECORDED INTERACTION**

Shows step 2 active and the vertical completed state.

`examples/storybook/stories.zig:2372`

```zig
// ── Steps ──
pub fn buildSteps(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const icons = ui.assets.common;
    const c = try col(cx, 24);
    const items = [_]W.StepItem{
        .{ .title = "Account", .description = "Create account" },
        .{ .title = "Profile", .description = "Fill details" },
        .{ .title = "Done", .description = "Finish" },
    };

    // 水平：completed step 用真实 check 图标（不传 check_icon_asset 时回退成 "v" 字符不美观）
    try c.appendChild(a, try label(cx, "Horizontal (step 2 active)"));
    try c.appendChild(a, try W.Steps(.{ .items = &items, .initial_current = 1, .check_icon_asset = icons.check }).mount(scope, cx));

    // 垂直
    try c.appendChild(a, try label(cx, "Vertical"));
    try c.appendChild(a, try W.Steps(.{ .items = &items, .initial_current = 2, .direction = .vertical, .check_icon_asset = icons.check }).mount(scope, cx));
    return c;
}
```

[View source on GitHubexamples/storybook/stories.zig:2372](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2372)

The story's verbatim source from the Storybook (zenit 4c50245 2026-10-01). `W` is `ui.widgets`; `col` / `row` / `label` are small Storybook layout helpers.

### StepsProps

`ui.widgets.Steps`

[src/ui/components/steps/mod.zig:28](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/steps/mod.zig#L28)

```zig
fn Steps(props: StepsProps) StepsBuilder
```

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `[]const StepItem` | `&.{}` | — |
| `initial_current` | `usize` | `0` | 当前步骤索引。\*\*只在 mount 时读取一次\*\*, Steps 是纯静态渲染 （无内部 state），改这个值不会让已挂载的实例更新。 需要动态步进请重新 mount，或用 ui.Show/For 驱动。 |
| `direction` | `Direction` | `.horizontal` | — |
| `check_icon_asset` | `?svg_assets.Asset` | `null` | — |

### \*Node

`ui.widgets.Steps`

mount returns `*Node` directly. Append it to a parent.