Progress Indicator

A progress indicator component that guides users through any linear, multistep task by showing the user their completed, current, and future steps.

Importing

To use the progress indicator component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/progress-indicator";

register(); // Now the progress indicator component is ready to use!

Web (Option 2)

import { registerProgressIndicator } from "@tapsioss/web-components";

registerProgressIndicator(); // Now the progress indicator component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/progress-indicator/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { ProgressIndicator } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-progress-indicator></tapsi-progress-indicator>

React

<ProgressIndicator />

Properties

Name	Attribute Name	Description	Type	Default Value
steps	steps	The total number of steps.	string	"2"
current	current	The current step index.	string	"0"
label	label	Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
valueText	valuetext	Defines the human-readable text alternative of value. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext	string	""