Syncfusion React Stepper

Implementing Syncfusion React Stepper

The Stepper component guides users through a multi-step workflow or process with visual indicators, step labels, and flexible configuration. It's ideal for wizards, checkout flows, onboarding processes, and any guided user experience requiring sequential navigation.

When to Use This Skill

Use the Stepper component when you need to:

• Guide users through multi-step processes (checkout, registration, setup wizards)
• Display step-by-step workflows with progress indication
• Validate user input before advancing to the next step
• Support linear or non-linear navigation patterns
• Customize appearance with icons, labels, and templates
• Localize content for different languages/regions

Component Overview

Key Capabilities:

• Step Navigation: Horizontal and vertical orientations, sequential or free navigation
• Step Types: Default (icons + labels), label-only, or indicator-only modes
• Events: Track step changes, validations, and interactions
• Styling: Animations, templates, custom CSS, and tooltips
• Accessibility: Full keyboard navigation and ARIA support
• Globalization: Multi-language support and RTL compatibility

Documentation and Navigation Guide

Getting Started & Installation

📄 Read: references/getting-started.md

• Package installation and dependencies
• CSS imports and theme setup
• Creating your first stepper
• Initial configuration and rendering

Core Configuration: Steps and Properties

📄 Read: references/steps-and-configuration.md

• Adding and defining steps with StepDirective
• Icon CSS, text, and label properties
• Active step management
• Disabled states and customization
• CSS class configuration

Layout & Appearance: Orientations and Types

📄 Read: references/orientations-and-types.md

• Horizontal and vertical orientations
• Step type modes (Default, Label, Indicator)
• Label positioning (Top, Bottom, Start, End)
• RTL support and responsive design

Interaction & Behavior: Events

📄 Read: references/events-and-interactions.md

• Lifecycle events: created, stepChanged, stepChanging
• User interaction events: stepClick, beforeStepRender
• Event arguments and handling patterns
• Preventing unwanted transitions

Workflow Control: Linear Flow and Validation

📄 Read: references/linear-flow-and-validation.md

• Linear stepper configuration for sequential navigation
• Step validation and status management
• Preventing invalid transitions
• Resetting stepper state

Advanced Styling & Customization

📄 Read: references/animation-template-tooltip.md

• Animation configuration and timing
• Template customization for steps
• Tooltip integration and display
• Custom content rendering

Methods and Advanced Patterns

📄 Read: references/methods-and-advanced.md

• Component methods (reset, etc.)
• Both API patterns (component-based vs property-based)
• Advanced use cases and patterns
• Performance optimization tips

Best Practices: Accessibility & Localization

📄 Read: references/accessibility-globalization.md

• WCAG compliance and ARIA attributes
• Keyboard navigation guidelines
• Globalization and localization
• RTL support implementation

Quick Start Examples

Pattern 1: Component-Based (StepsDirective)

import React from 'react';
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';

function App() {
  return (
    <div>
      <StepperComponent>
        <StepsDirective>
          <StepDirective iconCss="sf-icon-cart" label="Cart" />
          <StepDirective iconCss="sf-icon-transport" label="Delivery" />
          <StepDirective iconCss="sf-icon-payment" label="Payment" />
          <StepDirective iconCss="sf-icon-success" label="Confirmation" />
        </StepsDirective>
      </StepperComponent>
    </div>
  );
}

export default App;

Pattern 2: Property-Based (steps Array)

import React from 'react';
import { StepperComponent } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';

function App() {
  const steps = [
    { iconCss: 'sf-icon-cart', label: 'Cart' },
    { iconCss: 'sf-icon-transport', label: 'Delivery' },
    { iconCss: 'sf-icon-payment', label: 'Payment' },
    { iconCss: 'sf-icon-success', label: 'Confirmation' }
  ];

  return (
    <div>
      <StepperComponent steps={steps} />
    </div>
  );
}

export default App;

Common Patterns

Pattern 1: Wizard with Validation

const [activeStep, setActiveStep] = React.useState(0);
const stepperRef = React.useRef(null);

const handleStepChanging = (args) => {
  // Validate current step before advancing
  if (!validateStep(activeStep)) {
    args.cancel = true; // Prevent transition
  }
};

<StepperComponent 
  ref={stepperRef}
  stepChanging={handleStepChanging}
>
  {/* steps */}
</StepperComponent>

Pattern 2: Linear vs Non-Linear Navigation

// Linear: Users must complete steps sequentially
<StepperComponent linear={true}>

// Non-linear: Users can skip to any step
<StepperComponent linear={false}>

Pattern 3: Responsive Orientation

// Auto-switch orientation based on screen size
const [orientation, setOrientation] = React.useState('horizontal');

React.useEffect(() => {
  const handleResize = () => {
    setOrientation(window.innerWidth < 768 ? 'vertical' : 'horizontal');
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

<StepperComponent orientation={orientation}>

Key Props and Configuration

Component Properties

Step Properties (StepModel)

Animation Settings

Events

Methods

Event Arguments Reference:

• StepperChangedEventArgs: activeStep, previousStep, isInteracted, name, event, element
• StepperChangingEventArgs: activeStep, previousStep, cancel, isInteracted, name, event, element
• StepperClickEventArgs: activeStep, name, event, element
• StepperRenderingEventArgs: activeStep, name, element

Common Use Cases

• E-Commerce Checkout: Multi-step checkout flow with order review, shipping, payment
• User Registration: Multi-step signup with email, profile, verification
• Setup Wizards: Software onboarding with configuration steps
• Survey Forms: Step-by-step questionnaire with progress indication
• Installation Guides: Installation steps with instructions and validation