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, CfButton, type StepItem } from '@chufix-design/vue';

const current = ref(1);
const items: StepItem[] = [
  { title: '填写信息', description: '账号 / 邮箱 / 密码' },
  { title: '验证邮箱', description: '收到的邮件中点击链接' },
  { title: '完成', description: '即可开始使用' },
];
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <CfStepper :items="items" :current="current" />
    <div style="display:inline-flex; gap: 8px;">
      <CfButton
        size="sm"
        variant="tertiary"
        :disabled="current === 0"
        @click="current = Math.max(0, current - 1)"
      >上一步</CfButton>
      <CfButton
        size="sm"
        variant="primary"
        :disabled="current === items.length - 1"
        @click="current = Math.min(items.length - 1, current + 1)"
      >下一步</CfButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfStepper, CfButton } from '@chufix-design/vue';

const current = ref(1);
const items= [
  { title: '填写信息', description: '账号 / 邮箱 / 密码' },
  { title: '验证邮箱', description: '收到的邮件中点击链接' },
  { title: '完成', description: '即可开始使用' },
];
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <CfStepper :items="items" :current="current" />
    <div style="display:inline-flex; gap: 8px;">
      <CfButton
        size="sm"
        variant="tertiary"
        :disabled="current === 0"
        @click="current = Math.max(0, current - 1)"
      >上一步</CfButton>
      <CfButton
        size="sm"
        variant="primary"
        :disabled="current === items.length - 1"
        @click="current = Math.min(items.length - 1, current + 1)"
      >下一步</CfButton>
    </div>
  </div>
</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} />;
}

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

const items= [
{ 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.

背景

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

const items: StepItem[] = [
  { title: '设计' },
  { title: '开发' },
  { title: '测试' },
  { title: '上线' },
];
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 24px;">
    <CfStepper :items="items" :current="2" variant="numbered" />
    <CfStepper :items="items" :current="2" variant="dots" />
    <CfStepper :items="items" :current="2" variant="minimal" />
  </div>
</template>

<script setup>
import { CfStepper } from '@chufix-design/vue';

const items= [
  { title: '设计' },
  { title: '开发' },
  { title: '测试' },
  { title: '上线' },
];
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 24px;">
    <CfStepper :items="items" :current="2" variant="numbered" />
    <CfStepper :items="items" :current="2" variant="dots" />
    <CfStepper :items="items" :current="2" variant="minimal" />
  </div>
</template>

<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.

背景

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

const items: StepItem[] = [
  { title: '提交申请', description: '已于 2026-05-01 提交', status: 'done' },
  { title: '审核中', description: '客户经理预计 2 天内回复', status: 'current' },
  { title: '签订合同', description: '电子签或邮寄都可' },
  { title: '账户激活', status: 'error' },
];
</script>

<template>
  <CfStepper :items="items" orientation="vertical" />
</template>

<script setup>
import { CfStepper } from '@chufix-design/vue';

const items= [
  { title: '提交申请', description: '已于 2026-05-01 提交', status: 'done' },
  { title: '审核中', description: '客户经理预计 2 天内回复', status: 'current' },
  { title: '签订合同', description: '电子签或邮寄都可' },
  { title: '账户激活', status: 'error' },
];
</script>

<template>
  <CfStepper :items="items" orientation="vertical" />
</template>

<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).