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.

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

const items = [
  { value: 'first', title: 'First', description: 'Contact Info' },
  { value: 'second', title: 'Second', description: 'Date & Time' },
  { value: 'third', title: 'Third', description: 'Select Rooms' },
]

export const Basic = () => {
  return (
    <Steps.Root count={items.length}>
      <Steps.List>
        {items.map((item, index) => (
          <Steps.Item key={index} index={index}>
            <Steps.Trigger>
              <Steps.Indicator>{index + 1}</Steps.Indicator>
              <span>{item.title}</span>
            </Steps.Trigger>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {items.map((item, index) => (
        <Steps.Content key={index} index={index}>
          {item.title} - {item.description}
        </Steps.Content>
      ))}

      <Steps.CompletedContent>
        Steps Complete - Thank you for filling out the form!
      </Steps.CompletedContent>

      <div>
        <Steps.PrevTrigger>Back</Steps.PrevTrigger>
        <Steps.NextTrigger>Next</Steps.NextTrigger>
      </div>
    </Steps.Root>
  )
}

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.

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

const items = [
  { value: 'first', title: 'First', description: 'Contact Info' },
  { value: 'second', title: 'Second', description: 'Date & Time' },
  { value: 'third', title: 'Third', description: 'Select Rooms' },
]

export const RootProvider = () => {
  const steps = useSteps({ count: items.length })

  return (
    <>
      <button onClick={() => steps.resetStep()}>Reset</button>

      <Steps.RootProvider value={steps}>
        <Steps.List>
          {items.map((item, index) => (
            <Steps.Item key={index} index={index}>
              <Steps.Trigger>
                <Steps.Indicator>{index + 1}</Steps.Indicator>
                <span>{item.title}</span>
              </Steps.Trigger>
              <Steps.Separator />
            </Steps.Item>
          ))}
        </Steps.List>
        {items.map((item, index) => (
          <Steps.Content key={index} index={index}>
            {item.title} - {item.description}
          </Steps.Content>
        ))}
        <Steps.CompletedContent>
          Steps Complete - Thank you for filling out the form!
        </Steps.CompletedContent>
        <div>
          <Steps.PrevTrigger>Back</Steps.PrevTrigger>
          <Steps.NextTrigger>Next</Steps.NextTrigger>
        </div>
      </Steps.RootProvider>
    </>
  )
}

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

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' | 'vertical'

The orientation of the stepper

step
number

The current value 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
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

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]