Stepper
#

Stepper allows users to separate content into several steps and navigate through it using buttons or timeline.

Examples
#

Basic usage
#

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Vertical
#

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Custom icons
#

Each step config could have icon name specified, check va-icon for more details.

  1. Choose your product
  2. Checkout
  3. Review order
  4. Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Customized with slots
#

    Choose your product
    Checkout
    Review order
    Confirm and pay
  • Select a category
  • Browse products
  • Add to cart
Open in GitHub

Navigation only
#

You can hide controls and use stepper navigation independently

  1. 1
    Choose your product
  2. 2
    Checkout
  3. 3
    Review order
  4. 4
    Confirm and pay
Open in GitHub

Accessibility
#

The component itself has a role="group" with aria attributes like an aria-orientation attribute that depends on the vertical property. The current step element has the attribute aria-current="step". Keyboard navigation for this component is based on the w3 tabs pattern.

API
#

Props #

NameDescriptionTypesDefault
ariaLabel

String

"$t:progress"

color

String

"primary"

controlsHidden

Boolean

false

finishButtonHidden

Boolean

false

modelValue

Number

0

navigationDisabled

Boolean

false

nextDisabled

Boolean

false

stateful

Boolean

false

steps

Array

[]

steps

Array of step configs. Label is text displayed under each step in timeline, Icon if set, replaces step icon with specified icon, disabled makes step inaccessible without removing it from the timeline.

{ label: string, icon?: string, disabled?: boolean }

vertical

Boolean

false

Events #

NameDescription

finish

Emits when 'Finish' button is getting pressed

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

controls

Inserts provided template after default controls. If you want to replace default controls set controls-hidden prop to true. Slot scope properties and methods available: { setStep, nextStep, prevStep }.

divider

Replaces step divider in the timeline with provided template.

stepButton

Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-button-0, step-button-1, etc). Slot scope properties and methods available: { setStep, nextStep, prevStep, step, isActive, isCompleted }.

stepContent

Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. step-content-0, step-content-1, etc). Slot scope properties and methods available: { setStep, nextStep, prevStep }.

Methods #

NameDescription

nextStep

By default activates next step. If target step is disabled activates the step after it.

prevStep

By default activates previous step. If target step is disabled activates the step before it.

setStep

Activates step at specified index.

Css Variables #

NameDefault Value
--va-stepper-step-button-inactive-color var(--va-secondary)
--va-stepper-step-button-hover-highlight-opacity 0.1
--va-stepper-step-button-disabled-opacity 0.5
--va-stepper-step-button-padding 1rem
--va-stepper-step-button-number-size 1.2rem
--va-stepper-step-button-icon-size 2rem
--va-stepper-step-button-gap 0.5rem
--va-stepper-step-button-icon-border-radius 100%
--va-stepper-step-border-radius var(--va-square-border-radius)
--va-stepper-divider-color var(--va-secondary)
--va-stepper-divider-length auto
--va-stepper-divider-min-length 2rem
--va-stepper-divider-thickness 1px
--va-stepper-divider-spacing 0.5rem
--va-stepper-divider-vertical-margin-left 2rem
--va-stepper-step-content-wrapper-padding 0.5rem 1rem
--va-stepper-step-content-margin 0.8rem 0 2rem
--va-stepper-controls-gap 1rem