A row of dots marking progress through a fixed number of steps. Clicking a dot selects that step.
Ejemplos
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
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | number | 1 | The active step (v-model). |
| stepsobligatorio | number | — | Total number of steps. |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | number | Emitted with the clicked step index. |