Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Wizard Steps Button Group for Vue

Wizard controls that open on step 2 of 4, with Back, Next, and the names Account through Review.

UI library: Ark UI

A four-step form, opening on step 2, Profile. Back and Next move one step and stop at the ends. Between them the text reads Step 2 of 4. The other row names Account, Profile, Preferences, and Review, and any of them can be picked, including a jump to Review.

Use Back and Next when the form is linear, and the names when people may jump. A progress display of its own is Steps. In Vue, Ark UI does not save each step.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="Wizard">
    <Button :disabled="step === 1" @click="goBack" size="sm" variant="outline">
      <ChevronLeftIcon aria-hidden="true" data-icon="inline-start" />Back
    </Button>
    <Button size="sm" variant="outline">Step {{ step }} of {{ TOTAL_STEPS }}</Button>
    <Button :disabled="step === TOTAL_STEPS" @click="goNext" size="sm" variant="outline">
      Next<ChevronRightIcon aria-hidden="true" data-icon="inline-end" />
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Wizard steps">
    <Button
      aria-label="Previous step"
      :disabled="step === 1"
      @click="goBack"
      size="icon-sm"
      variant="outline"
    >
      <ChevronLeftIcon aria-hidden="true" />
    </Button>
    <Button
      v-for="item in STEPS"
      :aria-current='step === item.value ? "step" : undefined'
      :key="item.value"
      @click="goToStep"
      size="sm"
      :value="String(item.value)"
      :variant='step === item.value ? "default" : "outline"'
    >
      {{ item.label }}
    </Button>
<!-- The rest of the file is under Installation. -->

FAQ

How is the step tracked?

A number from 1 to 4, starting at 2. Back and Next step by one, and each named step carries its number as its value.

When are Back and Next disabled?

Back on step 1 and Next on step 4, in both rows. They get disabled from those checks.

How is the current step shown?

Its button uses variant="default" and sets aria-current="step". The others use outline.

Can people jump ahead to Review?

Yes, any named step can be picked. Disable the steps that aren't reachable yet if your form must be filled in order.

How are the chevron buttons named?

The icon-only buttons in the second row have aria-labels, Previous step and Next step. The first row's Back and Next have text.

Is there a component for steps?

Yes. Steps shows the progress and the step content together. This demo is only the navigation.

API Reference

Button Group

Sets aria-label="Wizard" and aria-label="Wizard steps". The rest is on the Button Group page.

Button

Sets disabled="step === 1", click="goBack", size="sm", variant="outline", disabled="step === TOTAL_STEPS" and click="goNext". The rest is on the Button page.

All 39 button group examples