Steps

Indicates progress through a multi-step process

Usage

Use Steps to build a multi-step flow (wizard) with a clickable list of steps and matching content panels.

import { Steps, Button, Text } from "@elemnts-ui/react";

<Steps count={3}>
  <Steps.List>
    {[0, 1, 2].map((index) => (
      <Steps.Item key={index} index={index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          <Text>Step {index + 1}</Text>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    ))}
  </Steps.List>
  {[0, 1, 2].map((index) => (
    <Steps.Content key={index} index={index}>
      <Text>Step {index + 1} Content</Text>
    </Steps.Content>
  ))}
  <Steps.CompletedContent>
    <Text>All steps completed!</Text>
  </Steps.CompletedContent>
  <Steps.PrevTrigger asChild>
    <Button variant="ghost">Prev</Button>
  </Steps.PrevTrigger>
  <Steps.NextTrigger asChild>
    <Button variant="ghost">Next</Button>
  </Steps.NextTrigger>
</Steps>;

API Reference

Steps

The root component that manages the stepper state.

Prop	Type	Default
asChild	`boolean`	`false`
count	`number`	-
defaultStep	`number`	-
ids	`ElementIds`	-
isStepSkippable	`(index: number) => boolean`	`() => false`
isStepValid	`(index: number) => boolean`	`() => true`
linear	`boolean`	-
onStepChange	`(details: StepChangeDetails) => void`	-
onStepComplete	`VoidFunction`	-
onStepInvalid	`(details: StepInvalidDetails) => void`	-
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
step	`number`	-

StepsRootProvider

Provides stepper state created with useSteps.

Prop	Type	Default
value	`UseStepsReturn`	required
asChild	`boolean`	`false`

StepsCompletedContent

Renders content after all steps are completed.

Prop	Type	Default
asChild	`boolean`	`false`

StepsContent

Renders the content associated with a step.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`

StepsContext

Provides access to the stepper state via a render prop.

StepsIndicator

Renders a visual indicator for a step.

Prop	Type	Default
asChild	`boolean`	`false`

StepsItem

Represents an individual step in the list.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`

StepsItemContext

Provides access to an individual step's state via a render prop.

StepsList

Contains the step items.

Prop	Type	Default
asChild	`boolean`	`false`

StepsNextTrigger

Renders a trigger that advances to the next step.

Prop	Type	Default
asChild	`boolean`	`false`

StepsPrevTrigger

Renders a trigger that returns to the previous step.

Prop	Type	Default
asChild	`boolean`	`false`

StepsProgress

Renders the overall completion progress.

Prop	Type	Default
asChild	`boolean`	`false`

StepsSeparator

Renders a divider between step items.

Prop	Type	Default
asChild	`boolean`	`false`

StepsTrigger

Renders the interactive control for a step.

Prop	Type	Default
asChild	`boolean`	`false`