Steps

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

First - Contact Info

Anatomy

<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Trigger>
        <Steps.Indicator />
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Content />
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

Examples

Basic

Here's a basic example of the Steps component.

Controlled

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

Root Provider

An alternative way to control the steps is to use the RootProvider component and the useSteps hook. This way you can access the state and methods from outside the component.

Vertical

Use the orientation prop to display the steps vertically.

API Reference

Props

Root

Renders a <div> element.

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

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

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

CompletedContent

Renders a <div> element.

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

Renders a <div> element.

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.

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

Indicator

Renders a <div> element.

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.

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

Item

Renders a <div> element.

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.

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

List

Renders a <div> element.

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.

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

NextTrigger

Renders a <button> element.

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

Renders a <button> element.

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

Renders a <div> element.

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.

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

RootProvider

Renders a <div> element.

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

Renders a <div> element.

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.

Attribute	Description
`[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

Renders a <button> element.

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.

Attribute	Description
`[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

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.