Syncfusion Javascript Stepper

Implementing Syncfusion TypeScript Stepper Control

Complete Table of Contents

1. Getting Started

• Getting Started Guide
• Installation & Setup
• First Stepper
• CSS Themes

2. API Reference

• Complete API Reference
  • Stepper Properties (15 properties)
  • Stepper Methods (12 methods)
  • Stepper Events (5 events)
  • Step Properties (8 properties)
  • Enums & Types (4 enums)
  • Animation Settings (3 properties)
  • Event Arguments (4 argument interfaces)

3. Core Concepts

• Steps Configuration

  • Adding & Managing Steps
  • Step Properties (label, iconCss, text, disabled, optional, status, isValid)
  • Disabling Steps
  • Setting Read-Only Mode
  • Setting Active Step
  • Icon-Only, Label-Only, and Hybrid Steps
  • Validation States

• Step Types

  • Default Type (Icons + Labels)
  • Label-Only Type
  • Indicator-Only Type
  • Label Positioning (Top, Bottom, Start, End)
  • Type Comparison & Selection
  • Switching Types Dynamically

• Orientations & Layout

  • Horizontal Orientation (Default)
  • Vertical Orientation
  • Responsive Behavior
  • Dynamic Layout Switching
  • Layout-Specific Styling

4. Advanced Features

• Events & Interaction

  • All 5 Events:
    • created
    • beforeStepRender
    • stepClick
    • stepChanging (with cancellation)
    • stepChanged
  • Event Arguments & Properties
  • Event Handling Patterns
  • Validation with Events
  • User Interaction Detection

• Templates & Animation

  • Custom Step Templates
  • Template Context Variables
  • Template Data Binding
  • Tooltip Customization
  • Animation Configuration
  • Animation Duration & Delay
  • Animation Enable/Disable

• Validation & Globalization

  • Step Validation (isValid states)
  • Linear Flow Enforcement
  • Preventing Invalid Transitions
  • Localization (L10n, Locale)
  • Right-to-Left (RTL) Support
  • Multi-Language Support
  • Accessibility (ARIA, Keyboard Navigation)

5. Utilities & Patterns

• Troubleshooting & Best Practices
  • Common Setup Issues
  • Event Handling Best Practices
  • Form Validation Patterns
  • CSS Customization
  • Theme Integration
  • Performance Optimization
  • Edge Cases & Solutions

When to Use This Skill

Use the Syncfusion TypeScript Stepper skill when you need to:

• Display a multi-step process or wizard workflow
• Create a progress indicator showing completion status
• Build a form wizard with validation between steps
• Show step-by-step guided experiences (checkout, onboarding, setup)
• Add step navigation with back/forward controls
• Implement linear workflow validation
• Create checkpoint-based processes with tracking
• Enable step customization with icons, labels, and templates
• Handle step events and user interactions
• Support multiple orientations (horizontal/vertical layouts)

Stepper Overview

The Stepper is a navigation control that displays a series of logical steps to guide users through a workflow. Each step can have:

• Indicators (numbers, icons, or shapes)
• Labels (text descriptions)
• Status tracking (active, completed, disabled)
• Event handlers for step transitions
• Custom templates for rich content
• Flexible styling with themes

Key Characteristics

Documentation and Navigation Guide

📚 Learning Path (Recommended Order)

1. Start Here: Getting Started

   • Installation and npm package setup
   • Dependencies (ej2-navigations, ej2-base, ej2-popups)
   • Development environment configuration
   • Basic stepper initialization with code examples
   • CSS imports and theme setup

2. Fundamentals: Steps Configuration

   • Adding steps to the stepper
   • Step properties (iconCss, text, label, cssClass, disabled, status)
   • Using StepModel interface for type safety
   • Step arrays and dynamic step updates
   • Accessing and modifying steps at runtime

3. Data Organization: Step Types

   • Default type: icons with labels
   • Label-only type: text descriptions only
   • Indicator-only type: numbers or icons only
   • Label positions (top, bottom, start, end)
   • Choosing the right type for your use case

4. UI Layout: Orientations and Layout

   • Horizontal orientation (default, side-by-side)
   • Vertical orientation (stacked, one above another)
   • Responsive behavior and switching
   • Layout-specific styling

5. Interactivity: Events and Interaction

   • stepChanged: when step successfully changes
   • stepChanging: before step change (can cancel)
   • stepClick: user clicked a step
   • beforeStepRender: before rendering each step
   • created: initialization complete
   • Event arguments and patterns

6. Enhancements: Templates and Animation

   • Custom HTML templates for step content
   • Template data binding
   • Animation settings and timing
   • Animation duration and delay
   • Tooltip customization

7. Production: Validation and Globalization

   • Form validation patterns
   • Linear workflow enforcement
   • Multi-language support
   • Right-to-left (RTL) support
   • Accessibility compliance

8. Troubleshooting: Best Practices

   • Common issues and solutions
   • Performance optimization
   • CSS customization
   • Theme integration
   • Edge cases

🔍 Quick Navigation by Topic

By Feature:

• 📄 Steps Configuration - Working with steps
• 📄 Step Types - Display options
• 📄 Orientations - Layout options
• 📄 Events & Interaction - Handling user actions

By Use Case:

• 🧩 Form Wizard: See Events & Interaction and Validation
• 🛒 Checkout Flow: See Steps Configuration and Events
• 🎨 Custom Styling: See Templates & Animation and Best Practices
• 🌍 Multi-Language: See Validation & Globalization

By API Lookup:

• 🔗 Complete API Reference - All properties, methods, events, and enums

Quick Start Example

Here's a minimal stepper setup to get started immediately:

import { Stepper } from '@syncfusion/ej2-navigations';

// Create a basic stepper with 4 steps
let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Cart' },
    { label: 'Shipping' },
    { label: 'Payment' },
    { label: 'Confirmation' }
  ]
});

// Render to DOM
stepper.appendTo('#stepper');

<nav id="stepper"></nav>

Common Patterns

Pattern 1: Icon + Label Steps (Default)

import { Stepper, StepModel } from '@syncfusion/ej2-navigations';

let steps: StepModel[] = [
  { iconCss: 'sf-icon-cart', label: 'Cart' },
  { iconCss: 'sf-icon-truck', label: 'Shipping' },
  { iconCss: 'sf-icon-payment', label: 'Payment' }
];

let stepper: Stepper = new Stepper({ steps: steps });
stepper.appendTo('#stepper');

Pattern 2: Vertical Workflow with Events

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  orientation: 'Vertical',
  stepChanged: (args) => console.log('Changed to step:', args.activeStep),
  stepChanging: (args) => {
    if (!validateCurrentStep()) args.cancel = true;
  }
});
stepper.appendTo('#stepper');

Pattern 3: Form Wizard with Validation

import { Stepper, StepperChangingEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Personal Info' },
    { label: 'Address' },
    { label: 'Review' }
  ],
  linear: true,  // Must complete steps in order
  stepChanging: (args: StepperChangingEventArgs) => {
    // Validate current step before allowing transition
    if (!isCurrentStepValid()) {
      args.cancel = true;  // Prevent step change
    }
  }
});
stepper.appendTo('#stepper');

Pattern 4: Dynamic Step Management

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  activeStep: 0
});
stepper.appendTo('#stepper');

// Navigate with methods
stepper.nextStep();      // Move to next step
stepper.previousStep();  // Move to previous step
stepper.reset();         // Return to first step

// Update properties
stepper.activeStep = 2;
stepper.dataBind();      // Apply changes

Key Properties at a Glance

Stepper Control Properties

Step Properties

Common Use Cases

Checkout Wizard: Multi-step purchase flow with cart, shipping, payment, and confirmation steps.

Form Wizard: Split long forms across multiple steps with validation at each stage.

Onboarding Flow: Guide new users through setup steps with progress indication.

Task Workflow: Track progress through a series of tasks or milestones.

Process Tracker: Display current position in a documented process flow.

Multi-Page Survey: Distribute survey questions across steps with progress tracking.

API Reference Quick Links

• Complete API Documentation
  • Stepper Properties (15 total)
  • Stepper Methods (12 total)
  • Stepper Events (5 total)
  • Step Properties (8 total)
  • Enums (4 types)
  • Animation Settings
  • Event Arguments

🚀 Ready to implement? Start with Getting Started to set up your first stepper, or jump to the API Reference for complete documentation.