Stepper

The Stepper component displays progress through a series of numbered steps, providing a clear indication of the current step in a process.

info

For more details about Vuetify’s usage of Stepper component, click Stepper page.
For more prop explanations, click Vuetify Stepper API page.

For Mobile Usage

Remember that the component has different sub-component layouts for horizontal and vertical usage.

• If you want to start from a specific step initially, this should be done within the PostRender event of the PageComponent inside a setTimeout function. You should provide the function's delay parameter in milliseconds, and if this is done, no qValue should be assigned to the component.
• If you want to assign values to components in the invisible steps of Stepper, this should be done after the qValue assignment of Stepper where the code for changing the qValue is written.

Props

Name	Description	Type	Default
altLabels	Places the labels beneath the step	boolean	false
dark	Applies the dark theme variant to the component.	boolean	false
nonLinear	Allow user to jump to any step	boolean	false
vertical	Sets the width for the component.	number|string	undefined
value	The designated model value for the component.	any	undefined
visible	Visibility of Stepper component	boolean	true

Events

Name	Description	Type
change	Emitted when step is changed by user interaction	Number

StepperContent

The StepperContent component represents the content associated with each step in the stepper. It typically contains the main content or form fields related to each step.

For Mobile Usage

You should not use StepperContent component alone on mobile, it should be within StepperItems.

Props

Name	Description	Type	Default
step	Sets step to associate the content to	number|string	undefined

StepperStep

The StepperStep component defines each individual step within the stepper. It includes options to customize the appearance and behavior of each step, such as labels, icons, and validation states.

For Mobile Usage

You should not use StepperStep component alone on mobile, it should be within StepperHeader.

Props

Name	Description	Type	Default
complete	Marks step as complete.	boolean	False
completeIcon	Icon to display when step is marked as completed.	string	'$Complete'
editIcon	Icon to display when step is editable.	boolean	'$Edit'
editable	Marks step as editable.	string	False
errorIcon	Marks step as editable.	string	'$Error'
text	Set input text.	string	'$Error'
rules	Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.	array	[]
step	Content to display inside step circle.	string|number	undefined
width	Width of the SVG trendline or bars.	string|number	300
visible	Visibility of StepperStep component.	boolean	true

Events

Name	Description
click	Emitted when component is clicked

StepperHeader

The StepperHeader component is responsible for displaying the header section of the stepper, which typically contains the step numbers and labels. It allows for customization of the header's appearance and behavior.

For Mobile Usage

You should not use StepperHeader component alone, it should be within Stepper.

StepperItems

The StepperItems component provides a way to display a list of items associated with each step in the stepper. It allows for the inclusion of additional information or actions related to each step.

For Mobile Usage

You should not use StepperItems component alone on mobile, it should be within Stepper.

Samples Qjson

Steppers_LinearWithContinueButton
Steppers_EditableNonLinear
Stepper_vertical
StepperExample