Stepper

A stepper component to display progress through a sequence of steps.

Examples

Default

Step 1 of 0

<script setup>
import {
  Stepper,
  StepperItem,
  StepperTrigger,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator
} from '@empathyds/vue'

const steps = [
  {
    step: 1,
    title: 'Your Details',
    description: 'Provide your name and email'
  },
  {
    step: 2,
    title: 'Company Details',
    description: 'Provide your company details'
  },
  {
    step: 3,
    title: 'Invite Team',
    description: 'Invite your team members'
  }
]
</script>

<template>
  <Stepper>
    <StepperItem
      v-for="item in steps"
      :key="item.step"
      class="basis-1/3"
      :step="item.step"
    >
      <StepperTrigger>
        <StepperIndicator />
        <div class="flex flex-col">
          <StepperTitle>
            {{ item.title }}
          </StepperTitle>
          <StepperDescription>
            {{ item.description }}
          </StepperDescription>
        </div>
      </StepperTrigger>
      <StepperSeparator
        v-if="item.step !== steps[steps.length - 1].step"
        class="w-full"
      />
    </StepperItem>
  </Stepper>
</template>
</Stepper>
</template>

Props

Stepper

Prop	Type	Default	Description
model-value	number	-	The verified step
default-value	number	1	The default step
orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the stepper
linear	boolean	true	Whether the stepper is linear

Slots

Stepper

Slot	Description
default	The stepper content

StepperItem

Slot	Description
default	The item content

StepperTrigger

Slot	Description
default	The trigger content

StepperIndicator

Slot	Description
default	The indicator content

StepperTitle

Slot	Description
default	The title content

StepperDescription

Slot	Description
default	The description content

StepperSeparator

Slot	Description
default	The separator content