A row of dots marking progress through a fixed number of steps. Clicking a dot selects that step.
Examples
Basic
Four steps with buttons to move between them.
<div class="flex flex-col items-center gap-4">
<UiStepper v-model="state.step" :steps="4" />
<div class="flex gap-2">
<UiButton size="sm" variant="outline" @click="state.step = Math.max(1, (state.step || 1) - 1)">Back</UiButton>
<UiButton size="sm" @click="state.step = Math.min(4, (state.step || 1) + 1)">Next</UiButton>
</div>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | number | 1 | The active step (v-model). |
| stepsrequired | number | — | Total number of steps. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Emitted with the clicked step index. |