Steps

#Basic usage

steps/basic.vue

<script setup lang="ts">
import { Steps } from "@bysages/vue";
</script>

<template>
  <Steps.Root :count="3">
    <Steps.List>
      <Steps.Item
        v-for="(title, index) in ['Account', 'Profile', 'Confirm']"
        :key="title"
        :index="index"
      >
        <Steps.Trigger>
          <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
          <span>{{ title }}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  </Steps.Root>
</template>

steps/vertical Vue React

steps/vertical.vue

<script setup lang="ts">
import { Steps } from "@bysages/vue";

const titles = ["Account", "Profile", "Confirm"];
</script>

<template>
  <Steps.Root :count="titles.length" orientation="vertical" class="w-full">
    <Steps.List>
      <Steps.Item v-for="(title, index) in titles" :key="title" :index="index">
        <Steps.Trigger>
          <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
          <span>{{ title }}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  </Steps.Root>
</template>

#Props

#CompletedContent

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

Prop	Type	Default	Description
`index`	`number`		—

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`index`	`number`		—

#List

A styled part — no props of its own; it takes the anatomy's shared styling.

#NextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#PrevTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Progress

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder every indicator stands on.
`count`	`number`		The total number of steps
`defaultStep`	`number`		The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
`id`	`string`		The unique identifier of the machine.
`ids`	`steps.ElementIds`		The custom ids for the stepper elements
`isStepSkippable`	`(index: number) => boolean`		Function that returns whether a step can be skipped
`isStepValid`	`(index: number) => boolean`		Function that returns whether a step is valid
`linear`	`boolean`		If `true`, the stepper requires the user to complete the steps in order
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	The orientation of the stepper
`step`	`number`		The controlled value of the stepper

#Separator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.