Stepper

Step indicator for multi-step workflows.

Components

Stepper

data

static

<arc-stepper>

Overview

Stepper is a horizontal progress indicator for multi-step workflows such as onboarding, checkout, and setup wizards. It renders numbered circles connected by horizontal lines, with each step in one of three visual states: completed (filled blue with a checkmark), active (blue outlined ring with glow), or upcoming (muted grey). The `active` property (zero-indexed) controls which step is current, and all steps before it are automatically marked as completed. The component uses a declarative child-element API: nest `<arc-step>` elements inside the stepper, each with a `label` property. The stepper collects these children via slotchange events and renders the visual step indicators. This keeps the markup readable and lets you add or remove steps without managing array data. Each step circle is 36px with the label centered below. Connecting lines between steps change color based on completion state: blue lines mark completed transitions, and default-colored lines mark upcoming ones. The active step circle has a `box-shadow` glow effect using `--accent-primary-rgb` to draw the eye. The component uses `role="list"` with `role="listitem"` on each step and `aria-current="step"` on the active step for accessibility.

Guidelines

When to use

Use 3-5 steps for a clear, manageable workflow: more than 6 gets cramped
Keep step labels to 1-2 words so they fit under the 32px circles
Update the active property as the user progresses through the workflow
Place the stepper at the top of a form or wizard for persistent progress context
Use alongside form validation: only advance active when the current step is valid

When not to use

Do not use stepper for navigation menus: it is a progress indicator, not a nav component
Do not allow users to skip ahead by clicking steps: enforce linear progression
Do not use more than 7 steps: if the workflow is that long, group steps into phases
Do not change step labels mid-flow: it confuses users about where they are
Do not use stepper for a single step: it needs at least 2 steps to be meaningful

Features

Three visual step states: completed (checkmark), active (glowing ring), upcoming (muted)
Declarative `<arc-step>` child elements with label property for readable markup
Zero-indexed active property: all steps before active are auto-completed
Horizontal connecting lines that change color based on completion state
Active step glow effect using box-shadow with `--accent-primary-rgb`
Accessible `role="list"` and aria-current="step" attributes
CSS parts (stepper, step, circle, line, label) for style customization
Checkmark icon replaces step number for completed steps

Preview

Usage

<arc-stepper active="1">
  <arc-step label="Account"></arc-step>
  <arc-step label="Profile"></arc-step>
  <arc-step label="Review"></arc-step>
</arc-stepper>

import { Step, Stepper } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Stepper active="1">
      <Step label="Account" />
      <Step label="Profile" />
      <Step label="Review" />
    </Stepper>
  );
}

<script setup>
import { Step, Stepper } from '@arclux/arc-ui-vue';
</script>

<template>
  <Stepper active="1">
    <Step label="Account" />
    <Step label="Profile" />
    <Step label="Review" />
  </Stepper>
</template>

<script>
  import { Step, Stepper } from '@arclux/arc-ui-svelte';
</script>

<Stepper active="1">
  <Step label="Account" />
  <Step label="Profile" />
  <Step label="Review" />
</Stepper>

import { Component } from '@angular/core';
import { Step, Stepper } from '@arclux/arc-ui-angular';

@Component({
  imports: [Step, Stepper],
  template: `
    <arc-stepper active="1">
      <arc-step label="Account"></arc-step>
      <arc-step label="Profile"></arc-step>
      <arc-step label="Review"></arc-step>
    </arc-stepper>
  `,
})
export class MyComponent {}

import { Step, Stepper } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Stepper active="1">
      <Step label="Account" />
      <Step label="Profile" />
      <Step label="Review" />
    </Stepper>
  );
}

import { Step, Stepper } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Stepper active="1">
      <Step label="Account" />
      <Step label="Profile" />
      <Step label="Review" />
    </Stepper>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stepper — requires stepper.css + base.css (or arc-ui.css) -->
<div class="arc-stepper">
  <div
   class="step step--"
   role="listitem"
   aria-current=""
   >
   <div class="step__header">

   <span class="step__circle">

   </span>

   </div>
   <span class="step__label"></span>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stepper — self-contained, no external CSS needed -->
<div class="arc-stepper" style="display: block">
  <div

   role="listitem"
   aria-current=""
   >
   <div style="display: flex; align-items: center; width: 100%; position: relative">

   <span style="width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: 'Tomorrow', system-ui, sans-serif; font-size: 13px; font-weight: 600; flex-shrink: 0; position: relative; z-index: 1; margin: 0 auto; box-sizing: border-box; background: rgb(77, 126, 247); color: rgb(232, 232, 236); border: 2px solid rgb(77, 126, 247); box-shadow: 0 0 12px rgba(77, 126, 247, 0.25)">

   </span>

   </div>
   <span style="margin-top: 8px; font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 13px; color: rgb(138, 138, 150); text-align: center; font-weight: 600"></span>
   </div>
</div>

API

activenumber=0: Zero-indexed active step; steps before this index show as completed. Clamped to the range of rendered steps.

Step

<arc-step>

Individual step within a Stepper.

labelstring='': Step label text

Stepper

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Step

See Also

Docs

Project

Arclight