Step Indicator

A simple visual progress indicator that shows the current step in a multi-step process using dots or bars.

Basic Usage

import { StepIndicator } from '@/components'

<StepIndicator current={1} total={3} />

Dot Variant

The default dot variant displays 8px circular indicators. Steps up to and including the current step are highlighted in blue.

<StepIndicator current={0} total={3} />
<StepIndicator current={1} total={3} />
<StepIndicator current={2} total={3} />

Bar Variant

The bar variant displays progress as horizontal bars with 6px height that fill the available space.

<StepIndicator current={0} total={3} variant="bar" />
<StepIndicator current={1} total={3} variant="bar" />
<StepIndicator current={2} total={3} variant="bar" />

Container Style

Add a subtle background container around the dots with indicatorStyle="container".

<StepIndicator current={1} total={3} indicatorStyle="container" />

Label Style

Display a text label below the indicators with indicatorStyle="label".

<StepIndicator current={1} total={3} indicatorStyle="label" label="Step 2" />

All Variants

Accessibility

• Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax
• Includes aria-label describing the current step
• Individual dots/bars are hidden from screen readers with aria-hidden="true"

API Reference

StepIndicator Props