Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Stepper

Step indicator for multi-step workflows.

Components Stepper
data static
<arc-stepper>

Overview

Stepper is a horizontal progress indicator for multi-step workflows like onboarding flows, checkout processes, 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 pattern keeps the markup readable and makes it easy to 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 indicate completed transitions, while default-colored lines indicate upcoming transitions. The active step circle has a `box-shadow` glow effect using `--accent-primary-rgb` to draw the user's 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

active number 0
Zero-indexed active step — steps before this index show as completed

Step

<arc-step>

Individual step within a Stepper.

label string ''
Step label text

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy