Steps

Steps guide users through a multi-step process in a clear and intuitive way. Combine StepGroup (or the default Steps export) with two or more Step children, and drive the UI with a zero-based currentStep index.

Overview

Resources

Install

yarn add @camp/steps

Upgrading to Next Gen

Steps now ships as @camp/steps (replacing @activecampaign/camp-components-steps). The API is aligned with the legacy component: Step and StepGroup with the same props for text, orientation, status, and group-level currentStep.

🧩 Default export: The package default export is Steps, an alias of StepGroup. You can keep using import { Step, StepGroup } from '@camp/steps' (same shape as the legacy package) or import Steps, { Step } from '@camp/steps' if you prefer the default name.

🎨 Visual parity: Chromatic stories cover horizontal and vertical layouts, default and warning status, and multi-step flows so behavior stays consistent with the Camp 1 implementation.

Migration Steps

1. Remove @activecampaign/camp-components-steps and install @camp/steps.
2. Update imports — for example:

- import { Step, StepGroup } from '@activecampaign/camp-components-steps';
+ import { Step, StepGroup } from '@camp/steps';

You can optionally switch to import Steps, { Step } from '@camp/steps' and use <Steps> in place of <StepGroup> — they are the same component.

3. Keep currentStep zero-based and pass orientation="vertical" when you need a stacked layout (for example in narrow modals).

Variations

Playground

Use StepGroup (or Steps) with currentStep to control which step is active. Step only needs text; position and progress are derived from the parent.

import { Step, StepGroup } from '@camp/steps';
 
function Example() {
  return (
    <StepGroup currentStep={1} orientation="horizontal">
      <Step text="Step 1" />
      <Step text="Step 2" />
      <Step text="Step 3" />
    </StepGroup>
  );
}

Horizontal Progress

Past steps show a filled indicator trail; the current step splits the connector; future steps use the neutral style.

import { Step, StepGroup } from '@camp/steps';
 
<StepGroup currentStep={1} orientation="horizontal">
  <Step text="Step 1" />
  <Step text="Step 2" />
  <Step text="Step 3" />
</StepGroup>;

Vertical Layout

Use orientation="vertical" on the group when horizontal space is tight (common in modals or side panels).

import { Step, StepGroup } from '@camp/steps';
 
<div style={{ height: 200 }}>
  <StepGroup currentStep={1} orientation="vertical">
    <Step text="Step 1" />
    <Step text="Step 2" />
    <Step text="Step 3" />
  </StepGroup>
</div>;

Warning Status

Set status="warning" on Step components when the flow should call attention to a problem state (for example validation blocking the next step).

import { Step, StepGroup } from '@camp/steps';
 
<StepGroup currentStep={1} orientation="horizontal">
  <Step text="Step 1" status="warning" />
  <Step text="Step 2" status="warning" />
  <Step text="Step 3" status="warning" />
</StepGroup>;

Many Steps

The layout flexes to support longer sequences; keep labels short so the row stays scannable.

import { Step, StepGroup } from '@camp/steps';
 
<StepGroup currentStep={2} orientation="horizontal">
  <Step text="Step 1" />
  <Step text="Step 2" />
  <Step text="Step 3" />
  <Step text="Step 4" />
  <Step text="Step 5" />
</StepGroup>;

Usage

Best Practices

• Drive currentStep from your router, wizard state, or modal controller so the indicator always matches where the user can actually navigate.
• Prefer vertical steps in constrained widths; use horizontal for top-of-page or full-width flows.
• Use status="warning" sparingly and consistently across steps in the same group so the meaning stays clear.
• Pair with primary actions (Next / Back) outside the component; Step and StepGroup are presentational and do not emit navigation events.

Content guidelines

Accessibility

• Interaction model: Step and StepGroup do not implement step navigation by themselves. Expose Next, Back, and Cancel controls as real button elements (or equivalent) with clear labels, and update currentStep in response.
• Keyboard: There is no built-in roving tabindex on the indicators; focusable controls should live in your form content or action bar, not on the decorative step nodes.
• Screen readers: Step labels render as text; completed steps use the icon with decorative usage so assistive tech treats the checkmark as visual emphasis rather than a separate announcement. If your flow needs explicit progress announcements, add an aria-live polite region or document step changes in page copy your users already receive.

Similar Components

Progress Bar

A progress bar that displays the progress of a task.

Modal

A modal window creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it.

Tabs

Allows users to switch between different views or functional aspects of an application.