---
title: "NumberStepper-Komponente — zenit Zig UI"
description: "Präzises Erhöhen und Verringern für Mengen und Parameter. min / max / step, direkte Eingabe, disabled und die Schrittbuttons teilen sich eine numerische…"
url: https://zenit.z.express/de/components/stepper
language: de
alternate_en: https://zenit.z.express/components/stepper.md
alternate_zh: https://zenit.z.express/zh/components/stepper.md
alternate_es: https://zenit.z.express/es/components/stepper.md
alternate_ja: https://zenit.z.express/ja/components/stepper.md
alternate_ko: https://zenit.z.express/ko/components/stepper.md
alternate_fr: https://zenit.z.express/fr/components/stepper.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# NumberStepper

`ui.widgets.NumberStepper`

Präzises Erhöhen und Verringern für Mengen und Parameter.

[Video](https://zenit.z.express/media/stories/stepper.mp4?v=72b5b63743)

**BEHAVIOR CONTRACT**

min / max / step, direkte Eingabe, disabled und die Schrittbuttons teilen sich eine numerische Einschränkung.

**RECORDED INTERACTION**

Der Harness klickt auf Plus; der Wert ändert sich um einen Schritt.

`examples/storybook/stories.zig:3025`

```zig
// ── NumberStepper ──
pub fn buildNumberStepper(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const ns = try ui.widgets.NumberStepper(.{ .value = 5, .min = 0, .max = 10 }, scope, cx);
    ns.wrapper.meta.ownership.meta.test_id = "story.stepper.basic";
    try c.appendChild(a, try label(cx, "0–10, step 1"));
    try c.appendChild(a, ns.wrapper);
    const ns2 = try ui.widgets.NumberStepper(.{ .value = 0.5, .step = 0.25, .width = 160 }, scope, cx);
    try c.appendChild(a, try label(cx, "step 0.25"));
    try c.appendChild(a, ns2.wrapper);
    const ns3 = try ui.widgets.NumberStepper(.{ .value = 3, .disabled = true }, scope, cx);
    try c.appendChild(a, try label(cx, "Disabled"));
    try c.appendChild(a, ns3.wrapper);
    return c;
}
```

[Quellcode auf GitHub ansehenexamples/storybook/stories.zig:3025](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L3025)

Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). `W` steht für `ui.widgets`; `col` / `row` / `label` sind kleine Layout-Helfer des Storybooks.

### NumberStepperProps

`ui.widgets.NumberStepper`

[src/ui/components/number\_stepper/mod.zig:14](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/number_stepper/mod.zig#L14)

```zig
fn mountNumberStepper(props: NumberStepperProps, scope: *Scope, cx: *Cx) !NumberStepperMount
```

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `value` | `f64` | `0` | — |
| `min` | `?f64` | `null` | — |
| `max` | `?f64` | `null` | — |
| `step` | `f64` | `1` | — |
| `width` | `f32` | `140` | — |
| `disabled` | `bool` | `false` | — |
| `on_change` | `?core.HandlerRef` | `null` | 值变化后触发；caller 读 state.value |

### NumberStepperMount

`ui.widgets.NumberStepper`

[src/ui/components/number\_stepper/mod.zig:104](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/number_stepper/mod.zig#L104)

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `wrapper` | `*Node` | — | — |
| `state` | `*NumberStepperState` | — | — |