Components
Steps

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

Using the Root Provider

The RootProvider component provides a context for the steps. It accepts the value of the useSteps hook. You can leverage it to access the component state and methods from outside the steps.

Example not found

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

API Reference

Root

PropDefaultType
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 step

id
string

The unique identifier of the machine.

ids
ElementIds

The custom ids for the stepper elements

linear
boolean

If `true`, the stepper requires the user to complete the steps in order

modelValue
number

The v-model value of the step

orientation
'horizontal' | 'vertical'

The orientation of the stepper

Data AttributeValue
[data-scope]steps
[data-part]root
[data-orientation]The orientation of the steps

CompletedContent

PropDefaultType
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

PropDefaultType
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 AttributeValue
[data-scope]steps
[data-part]content
[data-state]"open" | "closed"
[data-orientation]The orientation of the content

Indicator

PropDefaultType
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 AttributeValue
[data-scope]steps
[data-part]indicator
[data-complete]Present when the indicator value is complete
[data-current]Present when current
[data-incomplete]

Item

PropDefaultType
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 AttributeValue
[data-scope]steps
[data-part]item
[data-orientation]The orientation of the item

List

PropDefaultType
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 AttributeValue
[data-scope]steps
[data-part]list
[data-orientation]The orientation of the list

NextTrigger

PropDefaultType
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

PropDefaultType
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

PropDefaultType
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 AttributeValue
[data-scope]steps
[data-part]progress
[data-complete]Present when the progress value is complete

RootProvider

PropDefaultType
value
MachineApi<PropTypes>

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

PropDefaultType
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 AttributeValue
[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

PropDefaultType
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 AttributeValue
[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]