---
components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
---

<script>
  import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation.

## Default

Create a horizontal progress indicator with four steps.

<ProgressIndicator currentIndex={2}>
  <ProgressStep complete
    label="Step 1"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep complete
    label="Step 2"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep complete
    label="Step 3"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Step 4"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Prevent change on click

Disable automatic step selection when clicking completed steps.

<ProgressIndicator preventChangeOnClick currentIndex={2}>
  <ProgressStep complete
    label="Step 1"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep complete
    label="Step 2"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep complete
    label="Step 3"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Step 4"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Programmatic usage

Update the current step programmatically while maintaining step completion rules.

<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />

## Invalid step

Mark a step as invalid to indicate an error state.

<ProgressIndicator>
  <ProgressStep complete
    label="Step 1"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep invalid
    label="Step 2"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Step 3"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Disabled steps

Disable specific steps to prevent user interaction.

<ProgressIndicator>
  <ProgressStep complete
    label="Step 1"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep disabled
    label="Step 2"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep disabled
    label="Step 3"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Spaced-equally

Distribute steps evenly across the available space.

<ProgressIndicator spaceEqually>
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Vertical

Display steps in a vertical layout.

<ProgressIndicator vertical>
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

## Skeleton

Show a loading state with the specified number of steps.

<ProgressIndicatorSkeleton />

## Skeleton (vertical)

Show a vertical loading state with the specified number of steps.

<ProgressIndicatorSkeleton vertical />