Steps

The Steps component displays a multi-step process flow. Supports horizontal/vertical layout, counter numbers, color variants, and clickable steps.

Basic Usage

Bind the current active step index with v-model and define step items via items.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { TSteps } from '@gulcc/tabler-vue'

const step = ref(0)

const steps = [
  { title: 'Step 1', description: 'Basic settings' },
  { title: 'Step 2', description: 'Advanced config' },
  { title: 'Step 3', description: 'Confirmation' },
  { title: 'Step 4', description: 'Complete' },
]
</script>

<template>
  <TSteps v-model="step" :items="steps" />
  <p>Current Step: {{ step + 1 }} / 4</p>
</template>

Clickable Steps

Set href on step items to make them clickable. Clicking a step also updates v-model.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { TSteps } from '@gulcc/tabler-vue'

const step = ref(2)

const steps = [
  { title: 'Profile', description: 'Fill in basic info', href: '#' },
  { title: 'Contact', description: 'Bind phone & email', href: '#' },
  { title: 'Verification', description: 'Upload documents', href: '#' },
  { title: 'Complete', description: 'Awaiting review', href: '#' },
]
</script>

<template>
  <TSteps v-model="step" :items="steps" />
</template>

Counter Mode

Set counter to enable numeric step indicators.

<TSteps v-model="step" :counter="true" :items="steps" />

Color Variants

Use the color prop to apply theme colors. Supports all Tabler color options.

<TSteps v-model="step" color="green" :items="steps" />
<TSteps v-model="step" color="red" :items="steps" />
<TSteps v-model="step" color="orange" :items="steps" />

Vertical Layout

Set vertical to switch to vertical orientation — ideal for sidebars or multi-step forms.

<TSteps v-model="step" :vertical="true" :items="steps" />

Disabled State

Set disabled to disable all click interactions globally.

<TSteps v-model="step" :disabled="true" :items="steps" />

API

Props

Prop	Type	Default	Description
items	StepItem[]	[]	Array of step items
v-model / modelValue	number	0	Current active step index
color	string	''	Color variant: blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan
counter	boolean	false	Enable numeric counter display
vertical	boolean	false	Vertical layout mode
disabled	boolean	false	Disable all click interactions

StepItem

Prop	Type	Default	Description
title	string	—	Step title
description	string	—	Step description text
href	string	—	Link URL, makes step clickable
disabled	boolean	false	Disable individual step
icon	Component	—	Icon component (from @tabler/icons-vue)

Emits

Event	Payload	Description
update:modelValue	(value: number)	v-model update event
change	(value: number)	Emitted when step changes