---
name: stepper
category: navigation
summary: "Multi-step wizard with linear/non-linear navigation"
subpath: "@42/core/stepper"
---

Multi-step wizard with linear/non-linear navigation.

```html
<div data-c42-stepper>
  <div data-c42-stepper-step data-value="1">
    <span data-c42-stepper-indicator></span>
    <button data-c42-stepper-trigger>Step 1</button>
    <div data-c42-stepper-panel>Content for step 1</div>
  </div>
  <div data-c42-stepper-step data-value="2">
    <span data-c42-stepper-indicator></span>
    <button data-c42-stepper-trigger>Step 2</button>
    <div data-c42-stepper-panel>Content for step 2</div>
  </div>
</div>
```

```ts
import { Stepper } from '@42/core/stepper';
const s = new Stepper(root, { linear: true });
s.next(); s.prev(); s.goTo('2');
```

Options: `linear`, `defaultValue`
Events: `stepper:change` → `{ value, index }`