# Steps

URL: https://ark-ui.com/docs/components/steps
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/steps.mdx

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

---

<ComponentPreview id="Steps" />

## Anatomy

<Anatomy id="steps" />

```tsx
<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.

<Example component="steps" id="basic" />

### Controlled

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

**Example: controlled**

#### React

```tsx
import { Steps } from '@ark-ui/react/steps'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 Controlled = () => {
  const [step, setStep] = useState(0)

  return (
    <div className="stack">
      <output>current step: {step + 1}</output>

      <Steps.Root
        className={styles.Root}
        count={items.length}
        step={step}
        onStepChange={(details) => setStep(details.step)}
      >
        <Steps.List className={styles.List}>
          {items.map((item, index) => (
            <Steps.Item className={styles.Item} key={index} index={index}>
              <Steps.Trigger className={styles.Trigger}>
                <Steps.Indicator className={styles.Indicator}>{index + 1}</Steps.Indicator>
                <span>{item.title}</span>
              </Steps.Trigger>
              <Steps.Separator className={styles.Separator} />
            </Steps.Item>
          ))}
        </Steps.List>

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

        <Steps.CompletedContent className={styles.CompletedContent}>
          Steps Complete - Thank you for filling out the form!
        </Steps.CompletedContent>

        <div className={styles.Actions}>
          <Steps.PrevTrigger className={button.Root}>Back</Steps.PrevTrigger>
          <Steps.NextTrigger className={button.Root} data-variant="solid">
            Next
          </Steps.NextTrigger>
        </div>
      </Steps.Root>
    </div>
  )
}

```

#### Solid

```tsx
import { Steps } from '@ark-ui/solid/steps'
import { For, createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 Controlled = () => {
  const [step, setStep] = createSignal(0)

  return (
    <div class="stack">
      <output>current step: {step() + 1}</output>

      <Steps.Root
        class={styles.Root}
        count={items.length}
        step={step()}
        onStepChange={(details) => setStep(details.step)}
      >
        <Steps.List class={styles.List}>
          <For each={items}>
            {(item, index) => (
              <Steps.Item class={styles.Item} index={index()}>
                <Steps.Trigger class={styles.Trigger}>
                  <Steps.Indicator class={styles.Indicator}>{index() + 1}</Steps.Indicator>
                  <span>{item.title}</span>
                </Steps.Trigger>
                <Steps.Separator class={styles.Separator} />
              </Steps.Item>
            )}
          </For>
        </Steps.List>

        <For each={items}>
          {(item, index) => (
            <Steps.Content class={styles.Content} index={index()}>
              {item.title} - {item.description}
            </Steps.Content>
          )}
        </For>

        <Steps.CompletedContent class={styles.CompletedContent}>
          Steps Complete - Thank you for filling out the form!
        </Steps.CompletedContent>

        <div class={styles.Actions}>
          <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
          <Steps.NextTrigger class={button.Root} data-variant="solid">
            Next
          </Steps.NextTrigger>
        </div>
      </Steps.Root>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Steps } from '@ark-ui/vue/steps'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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

const currentStep = ref(0)
</script>

<template>
  <div class="stack">
    <output>current step: {{ currentStep + 1 }}</output>

    <Steps.Root v-model:step="currentStep" :class="styles.Root" :count="items.length">
      <Steps.List :class="styles.List">
        <Steps.Item v-for="(item, index) in items" :key="index" :class="styles.Item" :index="index">
          <Steps.Trigger :class="styles.Trigger">
            <Steps.Indicator :class="styles.Indicator">{{ index + 1 }}</Steps.Indicator>
            <span>{{ item.title }}</span>
          </Steps.Trigger>
          <Steps.Separator :class="styles.Separator" />
        </Steps.Item>
      </Steps.List>

      <Steps.Content v-for="(item, index) in items" :key="index" :class="styles.Content" :index="index">
        {{ item.title }} - {{ item.description }}
      </Steps.Content>

      <Steps.CompletedContent :class="styles.CompletedContent">
        Steps Complete - Thank you for filling out the form!
      </Steps.CompletedContent>

      <div :class="styles.Actions">
        <Steps.PrevTrigger :class="button.Root">Back</Steps.PrevTrigger>
        <Steps.NextTrigger :class="button.Root" data-variant="solid">Next</Steps.NextTrigger>
      </div>
    </Steps.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Steps } from '@ark-ui/svelte/steps'
  import button from 'styles/button.module.css'
  import styles from 'styles/steps.module.css'

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

  let step = $state(0)
</script>

<div class="stack">
  <output>current step: {step + 1}</output>

  <Steps.Root class={styles.Root} bind:step count={items.length}>
    <Steps.List class={styles.List}>
      {#each items as item, index}
        <Steps.Item class={styles.Item} {index}>
          <Steps.Trigger class={styles.Trigger}>
            <Steps.Indicator class={styles.Indicator}>{index + 1}</Steps.Indicator>
            <span>{item.title}</span>
          </Steps.Trigger>
          <Steps.Separator class={styles.Separator} />
        </Steps.Item>
      {/each}
    </Steps.List>

    {#each items as item, index}
      <Steps.Content class={styles.Content} {index}>
        {item.title} - {item.description}
      </Steps.Content>
    {/each}

    <Steps.CompletedContent class={styles.CompletedContent}>
      Steps Complete - Thank you for filling out the form!
    </Steps.CompletedContent>

    <div class={styles.Actions}>
      <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
      <Steps.NextTrigger class={button.Root} data-variant="solid">Next</Steps.NextTrigger>
    </div>
  </Steps.Root>
</div>

```

### 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.

**Example: root-provider**

#### React

```tsx
import { Steps, useSteps } from '@ark-ui/react/steps'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 (
    <div className="stack">
      <output>current step: {steps.value + 1}</output>

      <Steps.RootProvider className={styles.Root} value={steps}>
        <Steps.List className={styles.List}>
          {items.map((item, index) => (
            <Steps.Item className={styles.Item} key={index} index={index}>
              <Steps.Trigger className={styles.Trigger}>
                <Steps.Indicator className={styles.Indicator}>{index + 1}</Steps.Indicator>
                <span>{item.title}</span>
              </Steps.Trigger>
              <Steps.Separator className={styles.Separator} />
            </Steps.Item>
          ))}
        </Steps.List>

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

        <Steps.CompletedContent className={styles.CompletedContent}>
          Steps Complete - Thank you for filling out the form!
        </Steps.CompletedContent>

        <div className={styles.Actions}>
          <Steps.PrevTrigger className={button.Root}>Back</Steps.PrevTrigger>
          <Steps.NextTrigger className={button.Root} data-variant="solid">
            Next
          </Steps.NextTrigger>
        </div>
      </Steps.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Steps, useSteps } from '@ark-ui/solid/steps'
import { For } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 (
    <div class="stack">
      <output>current step: {steps().value + 1}</output>

      <Steps.RootProvider class={styles.Root} value={steps}>
        <Steps.List class={styles.List}>
          <For each={items}>
            {(item, index) => (
              <Steps.Item class={styles.Item} index={index()}>
                <Steps.Trigger class={styles.Trigger}>
                  <Steps.Indicator class={styles.Indicator}>{index() + 1}</Steps.Indicator>
                  <span>{item.title}</span>
                </Steps.Trigger>
                <Steps.Separator class={styles.Separator} />
              </Steps.Item>
            )}
          </For>
        </Steps.List>

        <For each={items}>
          {(item, index) => (
            <Steps.Content class={styles.Content} index={index()}>
              {item.title} - {item.description}
            </Steps.Content>
          )}
        </For>

        <Steps.CompletedContent class={styles.CompletedContent}>
          Steps Complete - Thank you for filling out the form!
        </Steps.CompletedContent>

        <div class={styles.Actions}>
          <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
          <Steps.NextTrigger class={button.Root} data-variant="solid">
            Next
          </Steps.NextTrigger>
        </div>
      </Steps.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Steps, useSteps } from '@ark-ui/vue/steps'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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

const steps = useSteps({ count: items.length })
</script>

<template>
  <div class="stack">
    <output>current step: {{ steps.value + 1 }}</output>

    <Steps.RootProvider :class="styles.Root" :value="steps">
      <Steps.List :class="styles.List">
        <Steps.Item v-for="(item, index) in items" :key="index" :class="styles.Item" :index="index">
          <Steps.Trigger :class="styles.Trigger">
            <Steps.Indicator :class="styles.Indicator">{{ index + 1 }}</Steps.Indicator>
            <span>{{ item.title }}</span>
          </Steps.Trigger>
          <Steps.Separator :class="styles.Separator" />
        </Steps.Item>
      </Steps.List>

      <Steps.Content v-for="(item, index) in items" :key="index" :class="styles.Content" :index="index">
        {{ item.title }} - {{ item.description }}
      </Steps.Content>

      <Steps.CompletedContent :class="styles.CompletedContent">
        Steps Complete - Thank you for filling out the form!
      </Steps.CompletedContent>

      <div :class="styles.Actions">
        <Steps.PrevTrigger :class="button.Root">Back</Steps.PrevTrigger>
        <Steps.NextTrigger :class="button.Root" data-variant="solid">Next</Steps.NextTrigger>
      </div>
    </Steps.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Steps, useSteps } from '@ark-ui/svelte/steps'
  import button from 'styles/button.module.css'
  import styles from 'styles/steps.module.css'

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

  const id = $props.id()
  const steps = useSteps({ id, count: items.length })
</script>

<div class="stack">
  <output>current step: {steps().value + 1}</output>

  <Steps.RootProvider class={styles.Root} value={steps}>
    <Steps.List class={styles.List}>
      {#each items as item, index}
        <Steps.Item class={styles.Item} {index}>
          <Steps.Trigger class={styles.Trigger}>
            <Steps.Indicator class={styles.Indicator}>{index + 1}</Steps.Indicator>
            <span>{item.title}</span>
          </Steps.Trigger>
          <Steps.Separator class={styles.Separator} />
        </Steps.Item>
      {/each}
    </Steps.List>

    {#each items as item, index}
      <Steps.Content class={styles.Content} {index}>
        {item.title} - {item.description}
      </Steps.Content>
    {/each}

    <Steps.CompletedContent class={styles.CompletedContent}>
      Steps Complete - Thank you for filling out the form!
    </Steps.CompletedContent>

    <div class={styles.Actions}>
      <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
      <Steps.NextTrigger class={button.Root} data-variant="solid">Next</Steps.NextTrigger>
    </div>
  </Steps.RootProvider>
</div>

```

### Vertical

Use the `orientation` prop to display the steps vertically.

**Example: vertical**

#### React

```tsx
import { Steps } from '@ark-ui/react/steps'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 Vertical = () => {
  return (
    <Steps.Root className={styles.Root} count={items.length} orientation="vertical">
      <Steps.List className={styles.List}>
        {items.map((item, index) => (
          <Steps.Item className={styles.Item} key={index} index={index}>
            <Steps.Trigger className={styles.Trigger}>
              <Steps.Indicator className={styles.Indicator}>{index + 1}</Steps.Indicator>
              <span>{item.title}</span>
            </Steps.Trigger>
            <Steps.Separator className={styles.Separator} />
          </Steps.Item>
        ))}
      </Steps.List>

      {items.map((item, index) => (
        <Steps.Content className={styles.Content} key={index} index={index}>
          <div className="vstack">
            <span>
              {item.title} - {item.description}
            </span>
            <div className={styles.Actions}>
              <Steps.PrevTrigger className={button.Root}>Back</Steps.PrevTrigger>
              <Steps.NextTrigger className={button.Root} data-variant="solid">
                Next
              </Steps.NextTrigger>
            </div>
          </div>
        </Steps.Content>
      ))}

      <Steps.CompletedContent className={styles.CompletedContent}>
        <div className="vstack">
          <span>Steps Complete - Thank you for filling out the form!</span>
          <Steps.PrevTrigger className={button.Root}>Back</Steps.PrevTrigger>
        </div>
      </Steps.CompletedContent>
    </Steps.Root>
  )
}

```

#### Solid

```tsx
import { Steps } from '@ark-ui/solid/steps'
import { For } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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 Vertical = () => {
  return (
    <Steps.Root class={styles.Root} count={items.length} orientation="vertical">
      <Steps.List class={styles.List}>
        <For each={items}>
          {(item, index) => (
            <Steps.Item class={styles.Item} index={index()}>
              <Steps.Trigger class={styles.Trigger}>
                <Steps.Indicator class={styles.Indicator}>{index() + 1}</Steps.Indicator>
                <span>{item.title}</span>
              </Steps.Trigger>
              <Steps.Separator class={styles.Separator} />
            </Steps.Item>
          )}
        </For>
      </Steps.List>

      <For each={items}>
        {(item, index) => (
          <Steps.Content class={styles.Content} index={index()}>
            <div class="vstack">
              <span>
                {item.title} - {item.description}
              </span>
              <div class={styles.Actions}>
                <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
                <Steps.NextTrigger class={button.Root} data-variant="solid">
                  Next
                </Steps.NextTrigger>
              </div>
            </div>
          </Steps.Content>
        )}
      </For>

      <Steps.CompletedContent class={styles.CompletedContent}>
        <div class="vstack">
          <span>Steps Complete - Thank you for filling out the form!</span>
          <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
        </div>
      </Steps.CompletedContent>
    </Steps.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Steps } from '@ark-ui/vue/steps'
import button from 'styles/button.module.css'
import styles from 'styles/steps.module.css'

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

<template>
  <Steps.Root :class="styles.Root" :count="items.length" orientation="vertical">
    <Steps.List :class="styles.List">
      <Steps.Item v-for="(item, index) in items" :key="index" :class="styles.Item" :index="index">
        <Steps.Trigger :class="styles.Trigger">
          <Steps.Indicator :class="styles.Indicator">{{ index + 1 }}</Steps.Indicator>
          <span>{{ item.title }}</span>
        </Steps.Trigger>
        <Steps.Separator :class="styles.Separator" />
      </Steps.Item>
    </Steps.List>

    <Steps.Content v-for="(item, index) in items" :key="index" :class="styles.Content" :index="index">
      <div class="vstack">
        <span>{{ item.title }} - {{ item.description }}</span>
        <div :class="styles.Actions">
          <Steps.PrevTrigger :class="button.Root">Back</Steps.PrevTrigger>
          <Steps.NextTrigger :class="button.Root" data-variant="solid">Next</Steps.NextTrigger>
        </div>
      </div>
    </Steps.Content>

    <Steps.CompletedContent :class="styles.CompletedContent">
      <div class="vstack">
        <span>Steps Complete - Thank you for filling out the form!</span>
        <Steps.PrevTrigger :class="button.Root">Back</Steps.PrevTrigger>
      </div>
    </Steps.CompletedContent>
  </Steps.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Steps } from '@ark-ui/svelte/steps'
  import button from 'styles/button.module.css'
  import styles from 'styles/steps.module.css'

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

<Steps.Root class={styles.Root} count={items.length} orientation="vertical">
  <Steps.List class={styles.List}>
    {#each items as item, index}
      <Steps.Item class={styles.Item} {index}>
        <Steps.Trigger class={styles.Trigger}>
          <Steps.Indicator class={styles.Indicator}>{index + 1}</Steps.Indicator>
          <span>{item.title}</span>
        </Steps.Trigger>
        <Steps.Separator class={styles.Separator} />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index}
    <Steps.Content class={styles.Content} {index}>
      <div class="vstack">
        <span>{item.title} - {item.description}</span>
        <div class={styles.Actions}>
          <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
          <Steps.NextTrigger class={button.Root} data-variant="solid">Next</Steps.NextTrigger>
        </div>
      </div>
    </Steps.Content>
  {/each}

  <Steps.CompletedContent class={styles.CompletedContent}>
    <div class="vstack">
      <span>Steps Complete - Thank you for filling out the form!</span>
      <Steps.PrevTrigger class={button.Root}>Back</Steps.PrevTrigger>
    </div>
  </Steps.CompletedContent>
</Steps.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `count` | `number` | No | The total number of steps |
| `defaultStep` | `number` | No | The initial value of the stepper when rendered.
Use when you don't need to control the value of the stepper. |
| `ids` | `ElementIds` | No | The custom ids for the stepper elements |
| `linear` | `boolean` | No | If `true`, the stepper requires the user to complete the steps in order |
| `onStepChange` | `(details: StepChangeDetails) => void` | No | Callback to be called when the value changes |
| `onStepComplete` | `VoidFunction` | No | Callback to be called when a step is completed |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the stepper |
| `step` | `number` | No | The controlled value of the stepper |


**Root Data Attributes:**

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


**Root CSS Variables:**

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


**CompletedContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

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


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

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


**List Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**List Data Attributes:**

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


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseStepsReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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]` |  |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `count` | `number` | No | The total number of steps |
| `defaultStep` | `number` | No | The initial value of the stepper when rendered.
Use when you don't need to control the value of the stepper. |
| `ids` | `ElementIds` | No | The custom ids for the stepper elements |
| `linear` | `boolean` | No | If `true`, the stepper requires the user to complete the steps in order |
| `onStepChange` | `(details: StepChangeDetails) => void` | No | Callback to be called when the value changes |
| `onStepComplete` | `VoidFunction` | No | Callback to be called when a step is completed |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the stepper |
| `step` | `number` | No | The controlled value of the stepper |


**Root Data Attributes:**

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


**Root CSS Variables:**

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


**CompletedContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

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


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

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


**List Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**List Data Attributes:**

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


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseStepsReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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]` |  |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `count` | `number` | No | The total number of steps |
| `defaultStep` | `number` | No | The initial value of the stepper when rendered.
Use when you don't need to control the value of the stepper. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `ElementIds` | No | The custom ids for the stepper elements |
| `linear` | `boolean` | No | If `true`, the stepper requires the user to complete the steps in order |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the stepper |
| `step` | `number` | No | The controlled value of the stepper |


**Root Data Attributes:**

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


**Root CSS Variables:**

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


**CompletedContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

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


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

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


**List Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**List Data Attributes:**

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


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Progress Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `StepsApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Separator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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]` |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `count` | `number` | No | The total number of steps |
| `defaultStep` | `number` | No | The initial value of the stepper when rendered.
Use when you don't need to control the value of the stepper. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `ElementIds` | No | The custom ids for the stepper elements |
| `linear` | `boolean` | No | If `true`, the stepper requires the user to complete the steps in order |
| `onStepChange` | `(details: StepChangeDetails) => void` | No | Callback to be called when the value changes |
| `onStepComplete` | `VoidFunction` | No | Callback to be called when a step is completed |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the stepper |
| `ref` | `Element` | No |  |
| `step` | `number` | No | The controlled value of the stepper |


**Root Data Attributes:**

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


**Root CSS Variables:**

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


**CompletedContent Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

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


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseStepsContext]>` | Yes |  |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Indicator Data Attributes:**

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


**ItemContext Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseStepsItemContext]>` | Yes |  |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Item Data Attributes:**

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


**List Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'ol'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**List Data Attributes:**

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


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Progress Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Progress Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseStepsReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Separator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Separator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

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