Stepper

Step list for multi-step flows with indicators and titles.

Stepper tracks progress through ordered steps. Use it for wizards and onboarding. For linear progress alone, prefer Progress or ProgressStepper.

AccountProfile & email
PlanBilling cycle
ReviewConfirm details

Contract

Overview

Machine-readable contract from Component Spec.

component: stepperexport: Stepperversion: 1attributes: data-refineui=stepper

Anatomy

Part	data-refineui
root	stepper
content	stepper-content
description	stepper-description
indicator	stepper-indicator
item	stepper-item
list	stepper-list
separator	stepper-separator
separator_fill	stepper-separator-fill
separator_rail	stepper-separator-rail
separator_track	stepper-separator-track
title	stepper-title

States

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

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Layout

Property	Value
direction	logical
rtl	true

Installation

npm install @refineui/react @refineui/tokens

Usage

import {
  Stepper,
  StepperList,
  StepperItem,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from "@refineui/react";

<Stepper value={step} onValueChange={setStep}>
  <StepperList>
    <StepperItem value={0}>
      <StepperIndicator>1</StepperIndicator>
      <StepperTitle>Account</StepperTitle>
      <StepperDescription>Profile & email</StepperDescription>
    </StepperItem>
    <StepperSeparator />
    <StepperItem value={1}>
      <StepperIndicator>2</StepperIndicator>
      <StepperTitle>Plan</StepperTitle>
    </StepperItem>
  </StepperList>
</Stepper>

Progress stepper