Stepper

A set of steps that are used to indicate progress through a multi-step process.

View code

Address

Add your address here

Shipping

Set your preferred shipping method

Checkout

Confirm your order

Step 2 of 0

Features

Can be controlled or uncontrolled.
Supports horizontal/vertical orientation.
Supports linear/non-linear activation.
Full keyboard navigation.

Installation

Install the component from your command line.

$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue

<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperTitle, StepperTrigger } from 'reka-ui'
</script>

<template>
  <StepperRoot>
    <StepperItem>
      <StepperTrigger />
      <StepperIndicator />

      <StepperTitle />
      <StepperDescription />

      <StepperSeparator />
    </StepperItem>
  </StepperRoot>
</template>

API Reference

Root

Contains all the stepper component parts.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.
`defaultValue`	`1`	`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.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`linear`	`true`	`boolean` Whether or not the steps must be completed in order.
`modelValue`		`number` The controlled value of the step to activate. Can be bound as `v-model`.
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation the steps are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down).

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

Slots (default)	Payload
`modelValue`	`number \| undefined` Current step
`totalSteps`	`number` Total number of steps
`isNextDisabled`	`boolean` Whether or not the next step is disabled
`isPrevDisabled`	`boolean` Whether or not the previous step is disabled
`isFirstStep`	`boolean` Whether or not the first step is active
`isLastStep`	`boolean` Whether or not the last step is active
`goToStep`	`(step: number): void` Go to a specific step
`nextStep`	`(): void` Go to the next step
`prevStep`	`(): void` Go to the previous step
`hasNext`	`(): boolean` Whether or not there is a next step
`hasPrev`	`(): boolean` Whether or not there is a previous step

Methods	Type
`goToStep`	`(step: number) => void`
`nextStep`	`() => void`
`prevStep`	`() => void`
`hasNext`	`() => boolean`
`hasPrev`	`() => boolean`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`
`[data-linear]`	Present when linear

Item

The step item component.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.
`completed`	`false`	`boolean` Shows whether the step is completed.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the step.
`step*`		`number` A unique value that associates the stepper item with an index

Slots (default)	Payload
`state`	`'active' \| 'completed' \| 'inactive'` The current state of the stepper item

Data Attribute	Value
`[data-state]`	`"active" \| "inactive" \| "completed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

The trigger that toggles the step.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.

Data Attribute	Value
`[data-state]`	`"active" \| "inactive" \| "completed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Indicator

The indicator for the step.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.

Slots (default)	Payload
`step`	`number` Current step

Title

An accessible title to be announced when the stepper trigger is focused.

If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.

Prop	Default	Type
`as`	`'h4'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.

Description

An optional accessible description to be announced when the stepper trigger is focused.

If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>. If you want to remove the description entirely, remove this part and pass aria-describedby="undefined" to StepperTrigger.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`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.
`completed`	`false`	`boolean` Shows whether the step is completed.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the step.
`step*`		`number` A unique value that associates the stepper item with an index

Slots (default)	Payload
`state`	`'active' \| 'completed' \| 'inactive'` The current state of the stepper item

Examples

Vertical

You can create vertical steps by using the orientation prop.

vue

<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperTitle } from 'reka-ui'
</script>

<template>
  <StepperRoot
    :default-value="1"
    orientation="vertical"
  >
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
  </StepperRoot>
</template>

With controls

You can add additional controls for the stepper using buttons and access the typed component instance using useTemplateRef.

vue

<script setup lang="ts">
const stepper = useTemplateRef('stepper')
</script>

<template>
  <StepperRoot
    ref="stepper"
    :default-value="1"
  >
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
  </StepperRoot>

  <div class="flex gap-2 justify-between mt-4">
    <button
      :disabled="!stepper?.hasPrev()"
      @click="stepper?.prevStep()"
    >
      Prev
    </button>

    <button
      :disabled="!stepper?.hasNext()"
      @click="stepper?.nextStep()"
    >
      Next
    </button>
  </div>
</template>

Accessibility

Keyboard Interactions

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` .
`EnterSpace`	Selects the focused step.

Stepper ​

Address

Shipping

Checkout

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Item ​

Trigger ​

Indicator ​

Title ​

Description ​

Examples ​

Vertical ​

With controls ​

Accessibility ​

Keyboard Interactions ​