Address

Add your address

Shipping

Set your preferred

Payment

Add any payment

Checkout

Confirm your order

Step 1 of 0

Installation

pnpm dlx kliping@latest add stepper

Usage

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

<template>
  <Stepper>
    <StepperItem :step="1">
      <StepperTrigger>
        <StepperIndicator>1</StepperIndicator>
        <StepperTitle>Step 1</StepperTitle>
        <StepperDescription>This is the first step</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem :step="2">
      <StepperTrigger>
        <StepperIndicator>2</StepperIndicator>
        <StepperTitle>Step 2</StepperTitle>
        <StepperDescription>This is the second step</StepperDescription>
      </StepperTrigger>
    </StepperItem>
  </Stepper>
</template>

Examples

Mendatar

Your details

Provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Step 1 of 0

Tegak

Your details

Provide your name and email address. We will use this information to create your account

Company details

A few details about your company will help us personalize your experience

Invite your team

Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later

Step 1 of 0

Form

Your details

Provide your name and email

Your password

Choose a password

Your Favorite Drink

Choose a drink

Full Name

Email

Step 1 of 0

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/stepper/stepper.vue components/ui/stepper/stepper-description.vue components/ui/stepper/stepper-indicator.vue components/ui/stepper/stepper-item.vue components/ui/stepper/stepper-separator.vue components/ui/stepper/stepper-title.vue components/ui/stepper/stepper-trigger.vue components/ui/stepper/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Stepper>
  <StepperItem>
    <StepperTrigger>
      <StepperIndicator />
    </StepperTrigger>
    <StepperSeparator />
    <StepperTitle />
    <StepperDescription />
  </StepperItem>
</Stepper>

API Reference

Stepper

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

Event	Payload	Description
@update:modelValue	[payload: number | undefined]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: number | undefined; totalSteps: number; isNextDisabled: boolean; isPrevDisabled: boolean; isFirstStep: boolean; isLastStep: boolean; goToStep: (step: number) => void; nextStep: () => void; prevStep: () => void; hasNext: () => boolean; hasPrev: () => boolean; }

StepperDescription

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

Slot	Props
#default	—

StepperIndicator

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

Slot	Props
#default	{ step: number; }

StepperItem

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

Slot	Props
#default	{ state: StepperState; }

StepperSeparator

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

StepperTitle

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

Slot	Props
#default	—

StepperTrigger

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

Slot	Props
#default	—

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Stepper yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	When focus moves onto the steps, focuses the first step .
ArrowDown	Moves focus to the next step depending on orientation.
ArrowRight	Moves focus to the next step depending on orientation .
ArrowUp	Moves focus to the previous step depending on orientation .
ArrowLeft	Moves focus to the previous step depending on orientation .
Enter + Space	Selects the focused step.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --muted, --muted-foreground, --primary, --primary-foreground, --radius.

Changelog

• 19 Okt 2026 · Fixed — Aksesibilitas: nama aksesibel dan peran ARIA yang sah.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.