1---
2category: Utilities
3---
4 
5# useStepper
6 
7Provides helpers for building a multi-step wizard interface.
8 
9## Usage
10 
11### Steps as array
12 
13```ts
14import { useStepper } from '@vueuse/core'
15 
16const {
17  steps,
18  stepNames,
19  index,
20  current,
21  next,
22  previous,
23  isFirst,
24  isLast,
25  goTo,
26  goToNext,
27  goToPrevious,
28  goBackTo,
29  isNext,
30  isPrevious,
31  isCurrent,
32  isBefore,
33  isAfter,
34} = useStepper([
35  'billing-address',
36  'terms',
37  'payment',
38])
39 
40// Access the step through `current`
41console.log(current.value) // 'billing-address'
42```
43 
44### Steps as object
45 
46```ts
47import { useStepper } from '@vueuse/core'
48 
49const {
50  steps,
51  stepNames,
52  index,
53  current,
54  next,
55  previous,
56  isFirst,
57  isLast,
58  goTo,
59  goToNext,
60  goToPrevious,
61  goBackTo,
62  isNext,
63  isPrevious,
64  isCurrent,
65  isBefore,
66  isAfter,
67} = useStepper({
68  'user-information': {
69    title: 'User information',
70  },
71  'billing-address': {
72    title: 'Billing address',
73  },
74  'terms': {
75    title: 'Terms',
76  },
77  'payment': {
78    title: 'Payment',
79  },
80})
81 
82// Access the step object through `current`
83console.log(current.value.title) // 'User information'
84```
85 
86## Type Declarations
87 
88```ts
89export interface UseStepperReturn<StepName, Steps, Step> {
90  /** List of steps. */
91  steps: Readonly<Ref<Steps>>
92  /** List of step names. */
93  stepNames: Readonly<Ref<StepName[]>>
94  /** Index of the current step. */
95  index: Ref<number>
96  /** Current step. */
97  current: ComputedRef<Step>
98  /** Next step, or undefined if the current step is the last one. */
99  next: ComputedRef<StepName | undefined>
100  /** Previous step, or undefined if the current step is the first one. */
101  previous: ComputedRef<StepName | undefined>
102  /** Whether the current step is the first one. */
103  isFirst: ComputedRef<boolean>
104  /** Whether the current step is the last one. */
105  isLast: ComputedRef<boolean>
106  /** Get the step at the specified index. */
107  at: (index: number) => Step | undefined
108  /** Get a step by the specified name. */
109  get: (step: StepName) => Step | undefined
110  /** Go to the specified step. */
111  goTo: (step: StepName) => void
112  /** Go to the next step. Does nothing if the current step is the last one. */
113  goToNext: () => void
114  /** Go to the previous step. Does nothing if the current step is the previous one. */
115  goToPrevious: () => void
116  /** Go back to the given step, only if the current step is after. */
117  goBackTo: (step: StepName) => void
118  /** Checks whether the given step is the next step. */
119  isNext: (step: StepName) => boolean
120  /** Checks whether the given step is the previous step. */
121  isPrevious: (step: StepName) => boolean
122  /** Checks whether the given step is the current step. */
123  isCurrent: (step: StepName) => boolean
124  /** Checks if the current step is before the given step. */
125  isBefore: (step: StepName) => boolean
126  /** Checks if the current step is after the given step. */
127  isAfter: (step: StepName) => boolean
128}
129export declare function useStepper<T extends string | number>(
130  steps: MaybeRef<T[]>,
131  initialStep?: T,
132): UseStepperReturn<T, T[], T>
133export declare function useStepper<T extends Record<string, any>>(
134  steps: MaybeRef<T>,
135  initialStep?: keyof T,
136): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
137```
138