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

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

## Default (horizontal)

<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

By default, clicking any step that is complete will update the current step index.

Set `preventChangeOnClick` to `true` to prevent this behavior.

<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

When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.

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

## Invalid step

<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

<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

<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

<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

Use the `count` prop to specify the number of progress steps to render.

<ProgressIndicatorSkeleton />

## Skeleton (vertical)

<ProgressIndicatorSkeleton vertical />