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

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 number of steps in the component.

defaultStep
number

The initial value of the step

id
string

The unique identifier of the machine.

ids
Partial<{ root: string list: string progress: string trigger(index: number): string separator(index: number): string item(index: number): string itemContent(index: number): string }>

The ids of the elements. Useful for composition.

linearfalse
boolean

Whether the step transitions should be linear and require the user to go through each step one by one.

modelValue
number

The v-model value of the component.

orientation'horizontal'
'horizontal' | 'vertical'

The orientation of the steps.

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]