# Stepper >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. The **** component provides a step navigator. ## Applicable Devices

Phone	Tablet	Smart TV	Wearable
Yes	Yes	No	No

## Required Permissions None ## Child Components Only the child component [StepperItem](ts-container-stepperitem.md) is supported. ## APIs Stepper\(value?: \{ index?: number \}\) - Parameters

Name	Type	Mandatory	Default Value	Description
index	number	No	0	Index of the <StepperItem> child component that is currently displayed.

## Attributes None ## Events

Name	Description
onFinish(callback: () => void)	Triggered when the nextLabel of the last stepper item in the stepper is clicked.
onSkip(callback: () => void)	Triggered when the current stepper item is ItemState.Skip and the nextLabel is clicked.
onChange(callback: (prevIndex?: number, index?: number) => void)	Triggered when the text button on the left or right is clicked to switch between steps. prevIndex: index of the step page before the switching. index: index of the step page after the switching, that is, index of the previous or next page.

Name

Description

onFinish(callback: () => void)

Triggered when the **nextLabel** of the last stepper item in the stepper is clicked.

onSkip(callback: () => void)

Triggered when the current stepper item is **ItemState.Skip** and the **nextLabel** is clicked.

onChange(callback: (prevIndex?: number, index?: number) => void)

Triggered when the text button on the left or right is clicked to switch between steps.

**prevIndex**: index of the step page before the switching.
**index**: index of the step page after the switching, that is, index of the previous or next page.

## Example ``` @Entry @Component struct StepperExample { @State currentIndex: number = 0 @State firstState: ItemState = ItemState.Normal @State secondState: ItemState = ItemState.Normal build() { Stepper({ index: this.currentIndex }) { StepperItem() { Text('Page One') .fontSize(35) .fontColor(Color.Blue) .width(200) .lineHeight(50) .margin({top:250}) } .nextLabel('') .position({x: '35%', y: 0}) StepperItem() { Text('Page Two') .fontSize(35) .fontColor(Color.Blue) .width(200) .lineHeight(50) .margin({top:250}) .onClick(()=>{ this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip }) } .nextLabel('Next') .prevLabel('Previous') .status(this.firstState) .position({x: '35%', y: 0}) StepperItem() { Text('Page Three') .fontSize(35) .fontColor(Color.Blue) .width(200) .lineHeight(50) .margin({top:250}) .onClick(()=>{ this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting }) } .position({x: '35%', y: 0}) .status(this.secondState) StepperItem() { Text('Page four') .fontSize(35) .fontColor(Color.Blue) .width(200) .lineHeight(50) .margin({top:250}) } .position({x: '35%', y: 0}) .nextLabel('Finish') } .onFinish(() => { console.log('onFinish') }) .onSkip(() => { console.log('onSkip') }) .onChange((prevIndex: number, index: number) => { this.currentIndex = index }) .align(Alignment.Center) } } ``` ![](figures/en-us_image_0000001239788885.gif)