Svelte Step Indicator

Use the step indicator component to show the progress of a process.

The Step Indicator component is a simple component to show the progress of a process. It can be used to show the progress of a multi-step form or a multi-step process.

Setup #

Import the StepIndicator component in a script tag.

Svelte
<script>
  import { StepIndicator } from 'flowbite-svelte'
</script>

Default step indicator #

Use the following example of a step indicator element to show a progress of step 2 out of 5.

  Edit on GitHub
        
Step 2
Svelte
<script>
  import { StepIndicator } from 'flowbite-svelte'
  let currentStep = 2;
  let steps = [
    'Step 1',
    'Step 2',
    'Step 3',
    'Step 4',
    'Step 5'
  ]
</script>

<StepIndicator {currentStep} {steps}/>

Glow #

Use the glow prop to add a glow effect to the current step.

  Edit on GitHub
        
Step 2
Svelte
<StepIndicator {currentStep} {steps} glow/>

Hide label #

Use the hideLabel prop to hide the label of the current step.

  Edit on GitHub
        
Svelte
<StepIndicator {currentStep} {steps} hideLabel/>

Sizes #

Use the size prop to change the size of a step indicator.

  Edit on GitHub
        
Small
Step 2
Default
Step 2
Large
Step 2
Extra Large
Step 2
Svelte
<div class="my-4">
<div class="mb-1 text-base font-medium dark:text-white">Small</div>
    <StepIndicator {currentStep} {steps} size="h-1.5" />
</div>

<div class="my-4">
<div class="mb-1 text-base font-medium dark:text-white">Default</div>
    <StepIndicator {currentStep} {steps} size="h-2.5" />
</div>

<div class="my-4">
<div class="mb-1 text-lg font-medium dark:text-white">Large</div>
    <StepIndicator {currentStep} {steps} size="h-4" />
</div>

<div class="my-4">
<div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div>
    <StepIndicator {currentStep} {steps} size="h-6" />
</div>

Colors #

Use the color prop to change the color of a step indicator.

  Edit on GitHub
        
Gray
Step 2
Blue/Default
Step 2
Red
Step 2
Green
Step 2
Yellow
Step 2
Indigo
Step 2
Purple
Step 2
Pink
Step 2
Svelte
<div class="my-4">
<div class="mb-1 text-base font-medium dark:text-white">Gray</div>
  <StepIndicator {currentStep} {steps} color="gray" />
</div>

<div class="my-4">
<div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue/Default</div>
  <StepIndicator {currentStep} {steps} color="blue" />
</div>

<div class="my-4">
<div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
    <StepIndicator {currentStep} {steps} color="red" />
</div>

<div class="my-4">
<div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
    <StepIndicator {currentStep} {steps} color="green" />
</div>

<div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
<div class="my-4">
    <StepIndicator {currentStep} {steps} color="yellow" />
</div>

<div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-400">Indigo</div>
<div class="my-4">
    <StepIndicator {currentStep} {steps} color="indigo" />
</div>

<div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-400">Purple</div>
<div class="my-4">
    <StepIndicator {currentStep} {steps} color="purple" />
</div>

<div class="mb-1 text-base font-medium text-pink-700 dark:text-pink-400">Pink</div>
<div class="my-4">
    <StepIndicator {currentStep} {steps} color="pink" />
</div>

Props #

The component has the following props, type, and default values. See types page for type information.

Name	Type	Default
steps	string[]	['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']
currentStep	number	1
size	string	'h-2.5'
color	'gray' \| 'red' \| 'yellow' \| 'green' \| 'indigo' \| 'purple' \| 'pink' \| 'blue'	'blue'
glow	boolean	false
hideLabel	boolean	false