Steps

Steps can be used to show a list of steps in a process.

Simple

svelte

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
         <Steps.Step.Description slot="description">{step.description}</Steps.Step.Description>
      </Steps.Step>
   {/each}
</Steps>

Bullets

svelte

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="bullets" {currentStep}>
   <Steps.Summary slot="summary">Step {currentStep} of {steps.length}</Steps.Summary>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
      </Steps.Step>
   {/each}
</Steps>

Bullets & Text

svelte

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="bullets-text" {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
      </Steps.Step>
   {/each}
</Steps>

Circles & Text

svelte

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="circles-text" {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
         <Steps.Step.Description slot="description">{step.description}</Steps.Step.Description>
      </Steps.Step>
   {/each}
</Steps>

Steps Props

variant	'simple' \| 'bullets' \| 'bullets-text' \| 'circles-text'	info
currentStep	number

Steps Slots

summary	<Steps.Summary slot="summary" />
default	<Steps.Step />

Steps.Step Props

href	string
step	number

Steps.Step Slots

title	<Steps.Step.Title slot="title" />
description	<Steps.Step.Description slot="description" />

Steps.Step.Title Slots

default

Steps.Step.Description Slots

default