Preview Updated 2026-05-10

Stepper

Multi-step progress indicator with horizontal/vertical layout, 3 variants, and clickable steps.

Basic usage

Each item in items needs at least a title. current is the index of the current step (0-based). Items with index less than current are marked done, equal is current, greater is pending.

<script setup lang="ts">
import { ref } from 'vue';
import { CfStepper, type StepItem } from '@chufix-design/vue';

const current = ref(1);
const items: StepItem[] = [
{ title: 'Fill in info', description: 'Username / email / password' },
{ title: 'Verify email', description: 'Click the link in the email' },
{ title: 'Done', description: 'Ready to use' },
];
</script>

<template>
<CfStepper :items="items" :current="current" />
</template>

import { useState } from 'react';
import { CfStepper, type StepItem } from '@chufix-design/react';

const items: StepItem[] = [
{ title: 'Fill in info', description: 'Username / email / password' },
{ title: 'Verify email', description: 'Click the link in the email' },
{ title: 'Done', description: 'Ready to use' },
];

export default function Demo() {
const [current, setCurrent] = useState(1);
return <CfStepper items={items} current={current} />;
}

Variants

numbered (default) shows step numbers; dots is minimal dots; minimal is transparent with a border.

<CfStepper :items="items" :current="2" variant="numbered" />
<CfStepper :items="items" :current="2" variant="dots" />
<CfStepper :items="items" :current="2" variant="minimal" />

<CfStepper items={items} current={2} variant="numbered" />
<CfStepper items={items} current={2} variant="dots" />
<CfStepper items={items} current={2} variant="minimal" />

Vertical with explicit status

orientation="vertical" lays out steps vertically. Each item can specify status: 'done' | 'current' | 'pending' | 'error', overriding the value inferred from current.

<CfStepper
orientation="vertical"
:items="[
  { title: 'Submit application', description: 'Submitted on 2026-05-01', status: 'done' },
  { title: 'Under review', description: 'Account manager replies within 2 days', status: 'current' },
  { title: 'Sign contract' },
  { title: 'Activate account', status: 'error' },
]"
/>

<CfStepper
orientation="vertical"
items={[
  { title: 'Submit application', description: 'Submitted on 2026-05-01', status: 'done' },
  { title: 'Under review', description: 'Account manager replies within 2 days', status: 'current' },
  { title: 'Sign contract' },
  { title: 'Activate account', status: 'error' },
]}
/>

API

Prop	Type	Default	Description
`items`	`StepItem[]`	`[]`	Step array
`current`	`number`	`0`	Current step index (0-based)
`variant`	`'numbered' \| 'dots' \| 'minimal'`	`'numbered'`	Visual mode
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`clickable`	`boolean`	`false`	Whether steps can be clicked; pair with the `change` event

StepItem: { key?, title, description?, status?, disabled? }. Events: change(index, item) (React: onChange).