Steps

A component for displaying a sequence of steps or stages in a process, often used for navigation or progress tracking.

Step 1 Content

Anatomy

Usage

<script>
  import {Steps} from 'ui-ingredients';
  import {CheckIcon} from '$lib/icons';

  let items = [
    {
      title: 'Step 1',
      content: 'Step 1 Content',
    },
    {
      title: 'Step 2',
      content: 'Step 2 Content',
    },
    {
      title: 'Step 3',
      content: 'Step 3 Content',
    },
  ];
</script>

<Steps.Root count={items.length}>
  <Steps.List>
    {#each items as item, index}
      <Steps.Item {index}>
        <Steps.Trigger>
          {item.title}

          <Steps.Indicator>
            <CheckIcon />
          </Steps.Indicator>
        </Steps.Trigger>

        <Steps.Separator />
      </Steps.Item>
    {/each}
  </Steps.List>

  {#each items as item, index}
    <Steps.Content {index}>
      {item.content}
    </Steps.Content>
  {/each}

  <Steps.CompletedContent>Done!🚀</Steps.CompletedContent>

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

API Reference

Root

Prop	Default	Description
`animateOnMount`	`true`	`boolean` Whether to run the enter animation when the component mounts.
`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.
`id`		`string` The unique identifier of the machine.
`ids`		`ElementIds` The custom ids for the stepper elements
`isStepSkippable`	`() => false`	`(index: number) => boolean` Whether a step can be skipped during navigation. Skippable steps are bypassed when using next/prev.
`isStepValid`	`() => true`	`(index: number) => boolean` Whether a step is valid. Invalid steps block forward navigation in linear mode.
`keepMounted`	`true`	`boolean` Whether to keep the component mounted after exit.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting.
`linear`		`boolean` If `true`, the stepper requires the user to complete the steps in order
`onExitComplete`		`() => void` Callback that fires when the exit animation of the dialog completes.
`onStepChange`		`(details: StepChangeDetails) => void` Callback to be called when the value changes
`onStepComplete`		`VoidFunction` Callback to be called when a step is completed
`onStepInvalid`		`(details: StepInvalidDetails) => void` Called when navigation is blocked due to an invalid step.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the stepper
`step`		`number` The controlled value of the stepper
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the steps
`data-part`	root
`data-scope`	steps

CompletedContent

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

Content

Prop	Default	Description
`index`		`number`
`asChild`		`Snippet` Render a different element.

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

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

Item

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the item
`data-part`	item
`data-scope`	steps
`data-skippable`

List

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the list
`data-part`	list
`data-scope`	steps

NextTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

PrevTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Progress

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-complete`	Present when the progress value is complete
`data-part`	progress
`data-scope`	steps

Separator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-complete`	Present when the separator value is complete
`data-current`	Present when current
`data-incomplete`
`data-orientation`	The orientation of the separator
`data-part`	separator
`data-scope`	steps

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-complete`	Present when the trigger value is complete
`data-current`	Present when current
`data-incomplete`
`data-orientation`	The orientation of the trigger
`data-part`	trigger
`data-scope`	steps
`data-state`	"open" \| "closed"