Progress indicator
A progress indicator shows the user where they are along the steps of a journey.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { ProgressIndicator } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| total * | number | — | How many steps the journey has. One dot is drawn for each. |
| defaultSelected | number | 0 | The step selected on first render, counted from zero. |
| label | string | 'Progress' | Names the group for a screen reader. Say what the steps are, not that they are steps. |
| onSelect | (index: number) => void | — | Called with the new index when a dot is chosen. |
Accessibility
What the component does for you, and what it needs from you.
- The group is a tablist and each dot is a tab, so the set is announced as one control rather than as loose buttons.
- Each dot is labelled with its position, as in Step 2 of 5.
- You supply the label. Without it the group announces as Progress, which tells a reader nothing about which journey they are in.