Stepper

Horizontal progress indicator for a sequence of steps. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiStepper } from '@ziyarago/ui/vue'

In progress

SearchSelect hotel3Guests4Payment

Vue

<UiStepper
  :steps="['Search', 'Select hotel', 'Guests', 'Payment']"
  :current="2"
 />

Start

1Details2Review3Done

Vue

<UiStepper :steps="['Details', 'Review', 'Done']" :current="0" />

Complete

DetailsReviewDone

Vue

<UiStepper :steps="['Details', 'Review', 'Done']" :current="3" />

Sizes

Search2Hotel3Pay

Vue

<UiStepper size="xs" :steps="['Search', 'Hotel', 'Pay']" :current="1" />

<UiStepper size="sm" :steps="['Search', 'Hotel', 'Pay']" :current="1" />

<UiStepper size="md" :steps="['Search', 'Hotel', 'Pay']" :current="1" />

<UiStepper size="lg" :steps="['Search', 'Hotel', 'Pay']" :current="1" />

<UiStepper size="xl" :steps="['Search', 'Hotel', 'Pay']" :current="1" />

API reference

Horizontal progress indicator with numbered steps. Use to show position in a multi-step flow.

Props

PropType and valuesDefaultDescription

stepsstring[]'[]'Step labels in order.

currentrequirednumber—Zero-based index of the active step. Earlier steps show a check mark.

sizexssmmdlgxl'md'Step circle and label size.