Stepper

A flexible stepper component for building multi-step workflows, forms, and guided processes with support for linear and non-linear progression.

Installation

Import

import { Stepper, Step } from '@svelte-atoms/core/stepper';

Preset Configuration

Customize the stepper appearance using presets

You can customize the default styles for Stepper components by defining presets in your configuration:

Examples

Explore different stepper variations

Basic Stepper

Simple horizontal stepper

Account

Enter your details

Address

Shipping details

Payment

Payment method

Review (Optional)

Confirm order

Code

<script lang="ts">
  import { Stepper, Step } from '@svelte-atoms/core/stepper';
  
  let activeStep = $state(0);
</script>

<Stepper.Root bind:step={activeStep}>
  <Stepper.Header>
    {#each steps as stepData, i}
      <Step.Root index={i}>
        <Step.Header>
          <Step.Indicator />
          <Step.Title>{stepData.title}</Step.Title>
          <Step.Separator />
        </Step.Header>
        <Step.Body>
          <p>{stepData.content}</p>
        </Step.Body>
      </Step.Root>
    {/each}
  </Stepper.Header>
  
  <Stepper.Body>
    <Stepper.Content />
  </Stepper.Body>
  
  <Stepper.Footer>
    {#snippet children({ stepper })}
      <Button onclick={() => stepper.state.navigation.previous()}>Previous</Button>
      <Button onclick={() => stepper.state.navigation.next()}>Next</Button>
    {/snippet}
  </Stepper.Footer>
</Stepper.Root>

Component Structure

The Stepper component consists of two main parts:

Stepper Components

Stepper.Root - Main container managing state
Stepper.Header - Container for step indicators
Stepper.Body - Container for step content
Stepper.Content - Active step content renderer
Stepper.Footer - Container for navigation buttons

Step Components

Step.Root - Individual step container
Step.Header - Step header section
Step.Indicator - Visual step indicator
Step.Title - Step title text
Step.Description - Step description
Step.Separator - Visual separator between steps
Step.Body - Step content (shown when active)

Properties

Prop

Type

Default

Description

Accessibility

Built-in Accessibility Features

• Keyboard navigation support
• ARIA attributes for step status
• Focus management
• Screen reader announcements for step changes