StepForm

Multi-step form with a Stepper header and Back/Next buttons; each step provides its own content. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

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

Booking flow

1Guests2Room3Payment

Step 1: enter traveller details.

Vue

<UiStepForm
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1: enter traveller details.' }, { label: 'Room', content: 'Step 2: choose a room type.' }, { label: 'Payment', content: 'Step 3: review the total and pay.' }]"
 />

Sizes

1Guests2Room

Step 1.

1Guests2Room

Step 1.

1Guests2Room

Step 1.

1Guests2Room

Step 1.

1Guests2Room

Step 1.

Vue

<UiStepForm
  size="xs"
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1.' }, { label: 'Room', content: 'Step 2.' }]"
 />

<UiStepForm
  size="sm"
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1.' }, { label: 'Room', content: 'Step 2.' }]"
 />

<UiStepForm
  size="md"
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1.' }, { label: 'Room', content: 'Step 2.' }]"
 />

<UiStepForm
  size="lg"
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1.' }, { label: 'Room', content: 'Step 2.' }]"
 />

<UiStepForm
  size="xl"
  finish-label="Confirm booking"
  :steps="[{ label: 'Guests', content: 'Step 1.' }, { label: 'Room', content: 'Step 2.' }]"
 />

API reference

Multi-step form shell: stepper, current step content and Back/Next buttons. Use for wizards and onboarding.

Props

PropType and valuesDefaultDescription

steps{ label: string; content: VNode }[]'[]'Steps in order. content is rendered while the step is active.

finishLabelstring'Finish'Text of the Next button on the last step.

sizexssmmdlgxl'md'Also sets the size of the Back/Next buttons.

Events

Vue: @name. React: onName.

finishCalled when Next is pressed on the last step.

Notes

The current step is internal; Next never validates, so guard the content yourself.