Components
ProgressIndicator
The ProgressIndicator is a sleek component that enhances user navigation in multi-step processes. It displays a series of dots, highlighting one to indicate the current step.
codeExamples
guidelines
The ProgressIndicator should be used in contexts where the user navigates through different steps to provide a sense of progress. It can be used in modals or similar situations.
Accessibility
The ProgressIndicator component uses the progressbar role, which allows assistive technologies such as screen readers to identify and announce it as a progress indicator. The aria-valuemin will automatically be set to 1, and aria-maxvalue will be set to the numberOfSteps-prop. This helps assistive technologies to communicate to the user that there are multiple steps, and tell them where in the process they are.
code
<ProgressIndicator />
import { ProgressIndicator } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
activeStep | number | The current step | |
numberOfSteps | number | The number of steps in the process |