Steps

A multi-step progress indicator for guiding users through a sequence of steps.

Anatomy 

<script>
  import { Steps } from "@saas-ui/svelte/components/steps";
</script>

<Steps.Root count={3}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator />
        Step 1
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Indicator />
        Step 2
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Trigger>
        <Steps.Indicator />
        Step 3
      </Steps.Trigger>
    </Steps.Item>
  </Steps.List>
  <Steps.Content index={0}>Content for step 1</Steps.Content>
  <Steps.Content index={1}>Content for step 2</Steps.Content>
  <Steps.Content index={2}>Content for step 3</Steps.Content>
  <Steps.CompletedContent>All steps completed!</Steps.CompletedContent>
</Steps.Root>

Examples

Basic Accessibility

Basic steps component with navigation.

Colours Accessibility

Use the colour prop to change the colour theme.

Description Accessibility

Use the description prop to add descriptions to steps.

Icon Accessibility

Use the icon prop to display custom icons.

Sizes Accessibility

Use the size prop to change the size of the steps.

Variants Accessibility

Use the variant prop to change the visual style.

Vertical Accessibility

Use orientation="vertical" for vertical steps.

Props

Steps.Root

The root container component for the steps.

Prop Type Default Description
children Snippet - Content to render inside the steps (composition API).
count number - The total number of steps.
defaultStep number 0 The initial step (0-indexed).
step number - The controlled current step.
size "sm" | "md" | "lg" "md" The size of the steps.
variant "subtle" | "solid" "solid" The visual variant.
orientation "horizontal" | "vertical" "horizontal" The orientation of the steps.
colour ColourName "gray" The colour palette.
linear boolean false Whether the steps must be completed in order.
onStepChange (details: { step: number }) => void - Callback when the step changes.
onStepComplete () => void - Callback when all steps are completed.
class string - Additional CSS classes to apply.
onPrefetch (index: number) => void - Callback invoked when hovering over a step (for prefetching content). Receives the step index. Similar to Astro's link prefetching, this allows preloading data before selection.

Steps.List

Container for the step items.

Prop Type Default Description
children Snippet - The step items to render.
class string - Additional CSS classes to apply.

Steps.Item

A single step item containing a trigger and separator.

Prop Type Default Description
index number - The index of this step (0-indexed).
title string - The title of this step.
description string - The description of this step.
icon Component<any> - Custom icon component to display instead of number.
children Snippet - Custom content for the step item.
class string - Additional CSS classes to apply.

Steps.Trigger

The clickable trigger for a step.

Prop Type Default Description
index number - The index of this step.
children Snippet - The content of the trigger.
class string - Additional CSS classes to apply.

Steps.Indicator

The visual indicator for a step (shows number or icon).

Prop Type Default Description
index number - The index of this step.
current boolean false Whether this step is the current step.
completed boolean false Whether this step is completed.
children Snippet - Content to render inside the indicator (defaults to step number).
class string - Additional CSS classes to apply.

Steps.Separator

The visual separator between steps.

Prop Type Default Description
index number - The index of the step this separator follows.
last boolean false Whether this is the last separator (should be hidden).
completed boolean false Whether the step this separator follows is completed.
class string - Additional CSS classes to apply.

Steps.Content

The content panel for a specific step.

Prop Type Default Description
index number - The index of the step this content belongs to.
children Snippet - The content to render.
class string - Additional CSS classes to apply.

Steps.CompletedContent

Content displayed when all steps are completed.

Prop Type Default Description
children Snippet - The content to render when all steps are complete.
class string - Additional CSS classes to apply.

Steps.NextTrigger

A button to navigate to the next step.

Prop Type Default Description
children Snippet - The content of the trigger.
variant ButtonVariants['variant'] "outline" The button variant.
size ButtonVariants['size'] "sm" The button size.
colour ColourName "gray" The colour theme.
class string - Additional CSS classes to apply.

Steps.PrevTrigger

A button to navigate to the previous step.

Prop Type Default Description
children Snippet - The content of the trigger.
variant ButtonVariants['variant'] "outline" The button variant.
size ButtonVariants['size'] "sm" The button size.
colour ColourName "gray" The colour theme.
class string - Additional CSS classes to apply.