Stepper

Overview

Stepper allows to separate content between the tabs (steps) and switch between them. You can control the steps programmatically, set linear steps execution or allow step selection, and show completed steps.

Building Wizard UI with Stepper

Properties

Name	Type	Description
name	string	Component name
selectedStepIndex	number	Selected step index
steps	string[]	Component steps
completed	boolean	State of completed steps
value	value	Current component value
children	children	Children components
valid	boolean	Indicates if the component is valid

Methods

Name	Parameters	Returns	Description
prev	–	void	Select previous step
next	–	void	Select next step
reset	–	void	Reset stepper
selectStep	index: number	void	Select step by index
setValue	data: object	void	Set component data. Data is an object with arbitrary structure.
resetValue	–	void	Reset component to the initial value
validate	–	void	Trigger form validation
resetValidation	–	void	Clear validation errors

Triggers

Name	Description
On Init	Triggered when the component is initialized
On Next	Triggered when the next step is selected
On Prev	Triggered when the previous step is selected
On Step Change	Triggered when the selected step changes