Steps

A component that guides users through a multi-step process.

<script setup lang="ts">
import { Steps } from '@destyler-ui/vue'

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 :count="items.length">
      <Steps.List>
        <Steps.Item v-for="item, index in items" :key="index" :index="index">
            <Steps.Trigger>
              <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
              <span>{{ item.title }}</span>
            </Steps.Trigger>
            <Steps.Separator />
          </Steps.Item>
      </Steps.List>

      <Steps.Content v-for="item, index in items" :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>
</template>

import { Steps } from '@destyler-ui/react'

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

export function 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>
  )
}

import { Steps } from '@destyler-ui/solid/steps'
import { For } from 'solid-js'

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

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

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

      <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>
  )
}

<script lang="ts">
  import type { StepsRootProps } from '@destyler-ui/svelte'
  import { Steps } from '@destyler-ui/svelte'

  const props: StepsRootProps = $props()
  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 count={items.length} {...props}>
  <Steps.List>
    {#each items as item, index (item.value)}
      <Steps.Item {index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          <span>{item.title}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index (item.value)}
    <Steps.Content {index}>{item.title} - {item.description}</Steps.Content>
  {/each}

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

Anatomy

<script setup lang="ts">
import { Steps } from '@destyler-ui/vue'
</script>

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

import { Steps } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Steps.Root>
      <Steps.List>
        <Steps.Item>
          <Steps.Trigger>
            <Steps.Indicator />
          </Steps.Trigger>
          <Steps.Separator />
        </Steps.Item>
      </Steps.List>
      <Steps.Content />
      <Steps.CompletedContent />
      <Steps.Progress />
      <Steps.PrevTrigger />
      <Steps.NextTrigger />
    </Steps.Root>
  )
}

import { Steps } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Steps.Root>
      <Steps.List>
        <Steps.Item index={0}>
          <Steps.Trigger>
            <Steps.Indicator />
          </Steps.Trigger>
          <Steps.Separator />
        </Steps.Item>
      </Steps.List>
      <Steps.Content index={0} />
      <Steps.CompletedContent />
      <Steps.Progress />
      <Steps.PrevTrigger />
      <Steps.NextTrigger />
    </Steps.Root>
  )
}

<script lang="ts">
  import { Steps } from '@destyler-ui/svelte'

  const items = [
    { title: 'Contact information', description: 'Enter your details' },
    { title: 'Date and time', description: 'Choose a time' },
    { title: 'Confirmation', description: 'Review your choices' },
  ]
</script>

<Steps.Root count={items.length}>
  <Steps.List>
    {#each items as item, index (item.title)}
      <Steps.Item {index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          <span>{item.title}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index (item.title)}
    <Steps.Content {index}>{item.description}</Steps.Content>
  {/each}

  <Steps.CompletedContent>Complete</Steps.CompletedContent>
  <Steps.PrevTrigger>Back</Steps.PrevTrigger>
  <Steps.NextTrigger>Next</Steps.NextTrigger>
</Steps.Root>

Examples

Basic

<script setup lang="ts">
import { Steps } from '@destyler-ui/vue'

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 :count="items.length">
      <Steps.List>
        <Steps.Item v-for="item, index in items" :key="index" :index="index">
            <Steps.Trigger>
              <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
              <span>{{ item.title }}</span>
            </Steps.Trigger>
            <Steps.Separator />
          </Steps.Item>
      </Steps.List>

      <Steps.Content v-for="item, index in items" :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>
</template>

import { Steps } from '@destyler-ui/react'

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

export function 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>
  )
}

import { Steps } from '@destyler-ui/solid/steps'
import { For } from 'solid-js'

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

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

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

      <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>
  )
}

<script lang="ts">
  import type { StepsRootProps } from '@destyler-ui/svelte'
  import { Steps } from '@destyler-ui/svelte'

  const props: StepsRootProps = $props()
  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 count={items.length} {...props}>
  <Steps.List>
    {#each items as item, index (item.value)}
      <Steps.Item {index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          <span>{item.title}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index (item.value)}
    <Steps.Content {index}>{item.title} - {item.description}</Steps.Content>
  {/each}

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

Root Provider

<script setup lang="ts">
import { Steps, useSteps } from '@destyler-ui/vue'

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 })

function resetSteps() {
  steps.value.resetStep()
}
</script>

<template>
  <button @click="resetSteps">Reset</button>
  <Steps.RootProvider :value="steps">
      <Steps.List>
        <Steps.Item v-for="item, index in items" :key="index" :index="index">
            <Steps.Trigger>
              <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
              <span>{{ item.title }}</span>
            </Steps.Trigger>
            <Steps.Separator />
          </Steps.Item>
      </Steps.List>

      <Steps.Content v-for="item, index in items" :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>
</template>

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

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

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

  function resetSteps() {
    steps.resetStep()
  }

  return (
    <>
      <button onClick={resetSteps}>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>
    </>
  )
}

import { Steps, useSteps } from '@destyler-ui/solid/steps'
import { For } from 'solid-js'

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

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

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

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

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

        <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>
    </>
  )
}

<script lang="ts">
  import { Steps, useSteps } from '@destyler-ui/svelte'

  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>

<button onclick={() => steps().resetStep()}>Reset</button>
<Steps.RootProvider value={steps}>
  <Steps.List>
    {#each items as item, index (item.value)}
      <Steps.Item {index}>
        <Steps.Trigger>
          <Steps.Indicator>{index + 1}</Steps.Indicator>
          <span>{item.title}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index (item.value)}
    <Steps.Content {index}>{item.title} - {item.description}</Steps.Content>
  {/each}

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

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`count`	—	`number` The total number of steps
`defaultStep`	—	`number` The initial value of the step
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`steps.ElementIds` The custom ids for the stepper elements
`linear`	—	`false \| true` If `true`, the stepper requires the user to complete the steps in order
`modelValue`	—	`number` The v-model value of the step
`orientation`	—	`"horizontal" \| "vertical"` The orientation of the stepper

Emit	Event
`stepChange`	`[details: StepChangeDetails]` Callback to be called when the value changes
`stepComplete`	`[]` Callback to be called when a step is completed
`update:modelValue`	`[value: number]` The callback fired when the model value changes.

CompletedContent

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

No serializable props or emits are declared for this part.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Progress

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`count`	—	`number` The total number of steps
`defaultStep`	—	`number` The initial value of the step
`ids`	—	`steps.ElementIds` The custom ids for the stepper elements
`linear`	—	`false \| true` 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

CompletedContent

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseStepsContext) => ReactNode`

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseStepsItemContext) => ReactNode`

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Progress

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseStepsReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`count`	—	`number` The total number of steps
`defaultStep`	—	`number` The initial value of the step
`ids`	—	`steps.ElementIds` The custom ids for the stepper elements
`linear`	—	`false \| true` 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

CompletedContent

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseStepsContext) => Element`

Indicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseStepsItemContext) => Element`

List

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Progress

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseStepsReturn`
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js217.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`count`	—	`number` The total number of steps
`defaultStep`	—	`number`
`id`	—	`string`
`ids`	—	`ElementIds \| undefined` The custom ids for the stepper elements
`linear`	—	`false \| true` If `true`, the stepper requires the user to complete the steps in order
`onStepChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").StepsStepChangeDetails) => 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

CompletedContent

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Content

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseStepsContext]>`

Indicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemContext

Prop	Default	Type
`render*`	—	`Snippet<[UseStepsItemContext]>`

List

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"ol">]>`
`children`	—	`Snippet<[]> \| undefined`

NextTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

PrevTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Progress

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseStepsReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Separator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`