Preview

Installation

npx sigma-ui@latest add stepper

Usage

<script setup lang="ts">
import { Stepper, StepperIndicator, StepperItem, StepperTitle, StepperTrigger } from '@/components/ui/stepper';
</script>

<template>
  <Stepper>
    <StepperItem :step="1">
      <StepperTrigger>
        <StepperIndicator>1</StepperIndicator>
        <StepperTitle>Account</StepperTitle>
      </StepperTrigger>
    </StepperItem>
  </Stepper>
</template>

Bind the active step with v-model. Set linear so a step can be opened only after the previous one is complete. orientation is horizontal or vertical.

StepperSeparator draws the line between steps. It turns into the accent color once the step is completed.

Examples

Horizontal

API Reference

Stepper

Props

Prop	Type	Default
defaultValue The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.	number	-
orientation The orientation the steps are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down).	DataOrientation	horizontal
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
modelValue The controlled value of the step to activate. Can be bound as v-model.	number	-
linear Whether or not the steps must be completed in order.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called when the value changes	[payload: number]

Slots

Slot	Scope
default StepperItem elements. Receives the active step.	{ modelValue?: number; }

StepperDescription

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Short explanation of the step.	-

StepperIndicator

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Step number or icon. Receives the current step index.	{ step: number; }

StepperItem

Props

Prop	Type	Default
steprequired A unique value that associates the stepper item with an index	number	-
disabled When true, prevents the user from interacting with the step.	boolean	-
completed Shows whether the step is completed.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Trigger, indicator, title, and separator. Receives the step state.	{ state: "active" | "inactive" | "completed"; }

StepperSeparator

Props

Prop	Type	Default
orientation Orientation of the component. Either vertical or horizontal. Defaults to horizontal.	DataOrientation	-
decorative Whether or not the component is purely decorative. <br>When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

StepperTitle

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Name of the step.	-

StepperTrigger

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Indicator and labels for one step.	-

Accessibility

The stepper follows the tabs pattern for a sequence: each step is a button, and arrow keys move between steps.

Key	Description
Tab	Moves focus into the stepper.
ArrowRight or ArrowDown	Moves to the next step.
ArrowLeft or ArrowUp	Moves to the previous step.
Enter or Space	Activates the focused step.