Components Stepper <arc-stepper> 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
- Use stepper for navigation menus — it is a progress indicator, not a nav component
- Allow users to skip ahead by clicking steps — enforce linear progression
- Use more than 7 steps — if the workflow is that long, group steps into phases
- Change step labels mid-flow — it confuses users about where they are
- 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 colour 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
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';
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</Stepper>
<script setup>
import { Step, Stepper } from '@arclux/arc-ui-vue';
</script>
<template>
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</Stepper>
</template>
<script>
import { Step, Stepper } from '@arclux/arc-ui-svelte';
</script>
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</Stepper>
import { Component } from '@angular/core';
import { Step, Stepper } from '@arclux/arc-ui-angular';
@Component({
imports: [Step, Stepper],
template: `
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</Stepper>
`,
})
export class MyComponent {}
import { Step, Stepper } from '@arclux/arc-ui-solid';
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</Stepper>
import { Step, Stepper } from '@arclux/arc-ui-preact';
<Stepper active="1">
<Step label="Account"></Step>
<Step label="Profile"></Step>
<Step label="Review"></Step>
</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: 'Tektur', 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
| Prop | Type | Default | Description |
active | number | 0 | Zero-indexed active step — steps before this index show as completed |
Step
<arc-step> Individual step within a Stepper.
| Prop | Type | Default | Description |
label | string | — | Step label text |