npm i @velkin/react
import { VuSteps } from "@velkin/react/steps";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | VuStepStateItem[] | [] | Step list when the default slot has no `<vu-step-item>` children. |
| currentStep | number | 1 | Active step index (1-based). |
| defaultCurrentStep | number | 1 | Initial / reset step for `reset()`. |
| lastCompletedStep | number | 0 | Furthest step the user may advance to when `allowStepJump` is false; `0` derives from `currentStep`. |
| layout | VuStepsLayout | "horizontal" | `horizontal` (default) or `vertical`. |
| labelPlacement | VuStepsLabelPlacement | "inline" | `inline` (default) or `below` the node. |
| size | VuStepsSize | "md" | `sm`, `md` (default), or `lg`. |
| variant | VuStepsVariant | "default" | `default`, `dots`, or `progress`. |
| allowStepJump | boolean | true | When false, only adjacent / completed steps are reachable. |
| hideNumbers | boolean | false | Show bullets instead of numbers when no icons are set. |
| showLabels | boolean | true | Show step labels beside indicators. Default: true. |
| compact | boolean | false | Tighter spacing between steps. |
| readonly | boolean | false | Progress display only; steps are not interactive. |
| expandAll | boolean | false | Keep every vertical step panel open (docs / overview). |
| label | string | "" | Accessible name for the step navigator. |
| completedSteps | null | number[] | null | Explicit completed indices; overrides auto completion. |
| stepIcon | string | "" | Default inactive icon for all steps. |
| checkedIcon | string | "" | Default completed icon for all steps. |
| errorIcon | string | "" | Default error icon for failed steps. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuStepsChangeDetail | User-driven step changes; call `detail.cancel()` to block. |
| Slot | Description |
|---|---|
| before | Content before the step navigator. |
| after | Content after the step navigator. |
| — | - `<vu-step-item>` steps; when assigned, replaces the `steps` prop. |
| Part | Description |
|---|---|
| steps | Horizontal step navigator row. |
| panels | Panel stack container. |
| panel | Individual step panel. |
| base | Step header button (prop mode). |
| node | Circular step indicator (prop mode). |
| labels | Label stack (prop mode). |
| Method | Description |
|---|---|
| previous | - Moves to the previous enabled step. |
| next | - Moves to the next enabled step. |
| prevStep | - Alias for `previous()`. |
| nextStep | - Alias for `next()`. |
| goToStep | - Navigates to a target step when allowed. |
| getCurrentStep | - Returns the current 1-based step index. |
| focusStep | - Focuses the header for the current step. |
| reset | - Restores `currentStep` from `defaultCurrentStep`. |
| Name | Definition |
|---|---|
| number[] | null | |
| VuStepsChangeDetail | |
| VuStepsLabelPlacement | |
| VuStepsLayout | |
| VuStepsSize | |
| VuStepsVariant | |