Progress Stepper

1. Cart
2. Shipping
3. Payment
4. Review

Contract

Overview

Machine-readable contract from Component Spec.

component: progress-stepperexport: ProgressStepperversion: 1attributes: data-refineui=progress-stepper

Anatomy

Part	data-refineui
root	progress-stepper
fill	progress-stepper-fill
item	progress-stepper-item
label	progress-stepper-label
list	progress-stepper-list
list_wrap	progress-stepper-list-wrap
marker	progress-stepper-marker
track	progress-stepper-track

States

Scope	Category	Values
component	component	data-state: complete, current, upcoming
component	environment	forced-colors, dir
progress-stepper-item	component	data-state: complete, current, upcoming

Accessibility

Slot	Element	Role
progress-stepper-track	div	progressbar

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { ProgressStepper, ProgressStepperList, ProgressStepperItem, ProgressStepperMarker, ProgressStepperLabel } from "@refineui/react";

<ProgressStepper value={currentStep} onValueChange={setCurrentStep}>
  <ProgressStepperList>
    <ProgressStepperItem value={1}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Account</ProgressStepperLabel>
    </ProgressStepperItem>
    <ProgressStepperItem value={2}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Profile</ProgressStepperLabel>
    </ProgressStepperItem>
    <ProgressStepperItem value={3}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Complete</ProgressStepperLabel>
    </ProgressStepperItem>
  </ProgressStepperList>
</ProgressStepper>

API Reference

ProgressStepper

Prop	Default	Type	Description
value	—	number	Controlled active step value.
defaultValue	—	number	Uncontrolled initial step.
onValueChange	—	(value: number) => void	Event handler when step changes.

ProgressStepperItem

Prop	Default	Type	Description
value	—	number	Step identity (required).
disabled	false	boolean	Disables this step.

ProgressStepperMarker

Step indicator (circle/checkmark).

ProgressStepperLabel

Step label text.