Steps

Used to guide users through a series of steps in a process

First - Contact Info

Usage

The Steps component is used to guide users through a series of steps in a process.

Supports horizontal and vertical orientations.
Support for changing the active step with the keyboard and pointer.
Support for linear and non-linear steps.

import { Steps } from '@ark-ui/react/steps'

Examples

Basic

Here's a basic example of the Steps component.

Example not found

Example not found

Example not found

Example not found

Controlled Steps

Using the RootProvider component, you can control the active step by using the step prop and handling the onStepChange event.

Example not found

Example not found

Example not found

Example not found

Root Provider

An alternative way to control the steps is to use the RootProvider component and the useSteps store hook.

This way you can access the steps state and methods from outside the steps.

Example not found

Example not found

Example not found

Example not found

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`count`		`number` The total number of steps
`defaultStep`		`number` The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
`ids`		`ElementIds` The custom ids for the stepper elements
`linear`		`boolean` If `true`, the stepper requires the user to complete the steps in order
`onStepChange`		`(details: StepChangeDetails) => void` Callback to be called when the value changes
`onStepComplete`		`VoidFunction` Callback to be called when a step is completed
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation of the stepper
`step`		`number` The controlled value of the stepper

CSS Variable	Description
`--percent`	The percent value for the Root

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	root
`[data-orientation]`	The orientation of the steps

CompletedContent

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Content

Prop	Default	Type
`index`		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	content
`[data-state]`	"open" \| "closed"
`[data-orientation]`	The orientation of the content

Indicator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	indicator
`[data-complete]`	Present when the indicator value is complete
`[data-current]`	Present when current
`[data-incomplete]`

Item

Prop	Default	Type
`index`		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	item
`[data-orientation]`	The orientation of the item

List

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	list
`[data-orientation]`	The orientation of the list

NextTrigger

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

PrevTrigger

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Progress

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	progress
`[data-complete]`	Present when the progress value is complete

RootProvider

Prop	Default	Type
`value`		`UseStepsReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Separator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	separator
`[data-orientation]`	The orientation of the separator
`[data-complete]`	Present when the separator value is complete
`[data-current]`	Present when current
`[data-incomplete]`

Trigger

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	steps
`[data-part]`	trigger
`[data-state]`	"open" \| "closed"
`[data-orientation]`	The orientation of the trigger
`[data-complete]`	Present when the trigger value is complete
`[data-current]`	Present when current
`[data-incomplete]`

Context

These are the properties available when using Steps.Context, useStepsContext hook or useSteps hook.

API

Property	Type
`value`	`number` The value of the stepper.
`percent`	`number` The percentage of the stepper.
`count`	`number` The total number of steps.
`hasNextStep`	`boolean` Whether the stepper has a next step.
`hasPrevStep`	`boolean` Whether the stepper has a previous step.
`isCompleted`	`boolean` Whether the stepper is completed.
`setStep`	`(step: number) => void` Function to set the value of the stepper.
`goToNextStep`	`VoidFunction` Function to go to the next step.
`goToPrevStep`	`VoidFunction` Function to go to the previous step.
`resetStep`	`VoidFunction` Function to go to reset the stepper.
`getItemState`	`(props: ItemProps) => ItemState` Returns the state of the item at the given index.