Steps

Ordered progress for wizards and checkout. In Chinese this component is 步驟條.

Finish is a success-green check. Process stays brand gold, so “you are here” is the only gold signal.

Demos

Horizontal

current is 0-based. Earlier steps are finish, the current step is process, and later steps wait.

<gk-steps current="1">
  <gk-step title="Details"></gk-step>
  <gk-step title="Payment"></gk-step>
  <gk-step title="Done"></gk-step>
</gk-steps>

With description

description sits under the title. You can also slot it.

<gk-steps current="2">
  <gk-step title="Plan" description="Annual plan selected"></gk-step>
  <gk-step title="Billing" description="Invoice and contact"></gk-step>
  <gk-step title="Pay" description="Card or transfer"></gk-step>
  <gk-step title="Confirm" description="Receipt sent"></gk-step>
</gk-steps>

Vertical

direction="vertical" gives descriptions more room. Connectors run beside the titles.

<gk-steps direction="vertical" current="1">
  <gk-step title="Create project" description="Name and visibility saved"></gk-step>
  <gk-step title="Invite" description="Add collaborators"></gk-step>
  <gk-step title="Connect repo" description="Git remote"></gk-step>
</gk-steps>

Error

status="error" applies to the current step. Earlier steps stay finish. Navigating does not clear an explicit error; set status back to process in the app.

<gk-steps current="1" status="error">
  <gk-step title="Upload"></gk-step>
  <gk-step title="Validate" description="Bad format. Fix and retry."></gk-step>
  <gk-step title="Publish"></gk-step>
</gk-steps>

Clickable

With clickable, only earlier steps can be activated. The current step and later steps do not emit update:current. Enter and Space activate a focused step.

<gk-steps clickable :current="step" @update:current="onStep">
  <gk-step title="One"></gk-step>
  <gk-step title="Two"></gk-step>
  <gk-step title="Three"></gk-step>
</gk-steps>

Sizes

Circles are 24 / 28 / 32 at sm / md / lg.

<gk-steps size="sm" current="1">...</gk-steps>

Custom icon

Slot icon on a step replaces the number, check, or error mark.

★

<gk-step title="Start">
  <span slot="icon">★</span>
</gk-step>

API

Steps props

Prop	Type	Default
current	number	0
status	'wait' | 'process' | 'finish' | 'error'	'process'
direction	'horizontal' | 'vertical'	'horizontal'
size	'sm' | 'md' | 'lg'	'md'
clickable	boolean	false
items	{ title, description?, status?, key? }[]	—

Slotted gk-step children win over items. A step status overrides the status derived from current.

Step props

Prop	Type	Default
title	string	''
description	string	''
status	'wait' | 'process' | 'finish' | 'error' | ''	''

Slots

Name	Description
default	gk-step children
icon	Replaces the indicator glyph
title	Title content
description	Description content

Events

Name	Detail
update:current	{ current } when a reachable step is activated
change	{ current } — same moment as update:current

CSS parts

root, list, item, indicator, connector, title, description.

Accessibility

• The root is a nav. The name follows the document language: “Steps” or 「步驟」. Set aria-label on the host to override it.
• Each step is a listitem. Its name includes the index, status, and title, for example “Step 2, in progress: Payment”.
• The current step has aria-current="step".
• Indicators and connectors are aria-hidden.