VStepper API

Props

name	type	default
`alt-labels`	boolean	false
Places the labels beneath the step.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`complete-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Icon to display when step is marked as completed.
`disabled`	boolean	false
Puts all children components into a disabled state.
`editable`	boolean	false
Marks step as editable.
`edit-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Icon to display when step is editable.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`error-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Icon to display when step has an error.
`flat`	boolean	false
Removes the stepper’s elevation.
`height`	string \| number	undefined
Sets the height for the component.
`hide-actions`	boolean	false
Hide actions bar (prev and next buttons).
`item-props` New in v3.11.0	SelectItemKey	'props'
Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component.
`items`	(string \| Record<string, any>)[]	[]
An array of strings or objects used for automatically generating children components.
`item-title`	SelectItemKey	'title'
Property on supplied `items` that contains its title.
`item-value`	SelectItemKey	'value'
Property on supplied `items` that contains its value.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`mandatory`	boolean \| 'force'	'force'
Forces at least one item to always be selected (if available).
`max`	number	undefined
Sets a maximum number of selections that can be made.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`mobile`	boolean	false
Forces the stepper into a mobile state, removing labels from stepper items.
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Overrides the display configuration default screen size that the component should be considered in mobile.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Allows one to select multiple items.
`next-text`	string	'$vuetify.stepper.next'
The text used for the Next button.
`non-linear`	boolean	false
Allow user to jump to any step.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prev-text`	string	'$vuetify.stepper.prev'
The text used for the Prev button.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`selected-class`	string	'v-stepper-item--selected'
Configure the active CSS class applied when an item is selected.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

string | Record<string, any>

{ prev: () => void; next: () => void }

{ prev: () => void; next: () => void }

string | Record<string, any>

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

string | Record<string, any>

never

never

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

{
  canEdit: boolean
  hasError: boolean
  hasCompleted: boolean
  title: string | number
  subtitle: string | number
  step: any
}

[`header-item.${string}`]
Slot for customizing header items when using the items prop.
[`item.${string}`]
Slot for customizing the content for each step.
`actions`
Slot for customizing v-stepper-actions.
`default`
The default Vue slot.
`header`
Slot for customizing the header.
`header-item`
Slot for customizing all header items.
`icon`
Slot for customizing all stepper item icons.
`item`
Define a custom item appearance.
`next`
Slot for customizing the next step functionality
`prev`
Slot for customizing the prev step functionality
`subtitle`
Slot for the component’s subtitle content.
`title`
Slot for the component’s title content.

Exposed

() => void

() => void

`next`
Move to the next step.
`prev`
Move to the prev step.

SASS Variables

name	default
`$stepper-actions-padding`	1rem
`$stepper-actions-stepper-padding`	0 1.5rem 1rem
`$stepper-actions-stepper-window-item-padding`	1.5rem 0 0
`$stepper-alt-labels-flex-basis`	175px
`$stepper-alt-labels-header-divider`	35px -67px 0
`$stepper-border-radius`	4px
`$stepper-elevation`	1
`$stepper-header-divider-margin`	0 -16px
`$stepper-header-elevation`	1
`$stepper-item-alt-labels-margin-bottom`	16px
`$stepper-item-avatar-background`	tools.theme-color('surface-variant', var(--v-medium-emphasis-opacity))
`$stepper-item-avatar-color`	rgb(var(--v-theme-on-surface-variant))
`$stepper-item-avatar-font-size`	.75rem
`$stepper-item-avatar-icon-font-size`	.875rem
`$stepper-item-avatar-margin-inline-end`	8px
`$stepper-item-opacity`	var(--v-medium-emphasis-opacity)
`$stepper-item-padding`	1.5rem
`$stepper-item-subtitle-font-size`	.75rem
`$stepper-item-subtitle-line-height`	1
`$stepper-item-subtitle-opacity`	var(--v-medium-emphasis-opacity)
`$stepper-item-title-line-height`	1
`$stepper-item-transition-duration`	.2s
`$stepper-item-transition-property`	opacity
`$stepper-item-transition-timing-function`	cubic-bezier(0.4, 0, 0.2, 1)
`$stepper-window-margin`	1.5rem

#VStepper API

VStepper API