Stepper

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

<script setup lang="ts">
import { ASliderRange, ASliderRoot, ASliderThumb, ASliderTrack } from 'akar';
import { ref } from 'vue';

const value = ref([50]);
</script>

<template>
  <ASliderRoot
    v-model="value"
    class="flex w-full select-none items-center relative touch-none"
    :max="100"
    :step="1"
  >
    <ASliderTrack class="rounded-full bg-background-accented grow h-[8px] relative overflow-hidden">
      <ASliderRange class="rounded-full bg-primary h-full absolute" />
    </ASliderTrack>
    <ASliderThumb
      class="rounded-full bg-background size-4 ring-2 ring-primary focus-visible:(outline-2 outline-primary/50 outline-offset-2)"
      aria-label="Volume"
    />
  </ASliderRoot>
</template>

Features

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

Anatomy

Import all parts and piece them together.

<script setup>
import { AStepperDescription, AStepperIndicator, AStepperItem, AStepperRoot, AStepperTitle, AStepperTrigger } from 'akar';
</script>

<template>
  <AStepperRoot>
    <AStepperItem>
      <AStepperTrigger />
      <AStepperIndicator />

      <AStepperTitle />
      <AStepperDescription />

      <AStepperSeparator />
    </AStepperItem>
  </AStepperRoot>
</template>

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

API Reference

Root

Contains all the stepper component parts.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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 `AConfigProvider` or assumes LTR (left-to-right) reading mode.
`linear`	`true`	`boolean` Whether or not the steps must be completed in order.
`modelValue`		`number`
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation the steps are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down).

Emits

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

Slots

Slot	Type
`modelValue`	`number` The controlled value of the step to activate. Can be bound as `v-model`.
`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

Data Attributes

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

Item

The step item component.

Data Attributes

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

Trigger

The trigger that toggles the step.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| 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 Attributes

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

Indicator

The indicator for the step.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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

Slot	Type
`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>.

Props

Prop	Default	Type
`as`	`'h4'`	`APrimitiveAsTag \| 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 AStepperTrigger.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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` Current step

Slots

Slot	Type
`state`	`'active' \| 'completed' \| 'inactive'` The current state of the stepper item

Examples

Vertical

You can create vertical steps by using the orientation prop.

<script setup>
import { AStepperDescription, AStepperIndicator, AStepperItem, AStepperRoot, AStepperTitle } from 'akar';
</script>

<template>
  <AStepperRoot
    :default-value="1"
    orientation="vertical"
  >
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
  </AStepperRoot>
</template>

With controls

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

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

<template>
  <AStepperRoot
    ref="stepper"
    :default-value="1"
  >
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
    <AStepperItem>
      <AStepperIndicator />
      <AStepperTitle />
      <AStepperDescription />
    </AStepperItem>
  </AStepperRoot>

  <div class="mt-4 flex gap-2 justify-between">
    <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.

Splitter

A component that divides your layout into resizable sections.

Tabs

A set of tab panels that are displayed one at a time.