Github

Progress Tracker

Progress trackers show the current step and overall status in multi-step flows.

Component variations

Indicator type

Contains: Number, Icon. Number is default

1

Progress Title

This is a description of the progress

Profile

Confirm your personal profile details

States

Contains: Default, Active, Completed, Error, Disabled

1

Default

This is a description of the progress

2

Active

This is a description of the progress

Completed

This is a description of the progress

Error

This is a description of the progress

5

Disabled

This is a description of the progress

Default

This is a description of the progress

Active

Confirm your personal profile details

Completed

Confirm your personal profile details

Error

Confirm your personal profile details

Disabled

Confirm your personal profile details

Direction

Contains: Horizontal, Vertical. Vertical is recommended for long forms. Indicator size is set automatically based on direction.

1

Default

This is a description of the progress

2

Active

This is a description of the progress

Completed

This is a description of the progress

Error

This is a description of the progress

5

Disabled

This is a description of the progress

Personal Information

Enter your name, address, and contact details

Business Details

Share business registration

3

Identity Verification

Upload documents to verify your identity

4

Review & Submit

Confirm details and submit your application

Description

Optional descriptions can be hidden if not needed

Personal Information

Enter your name, address, and contact details

Business Details

Share business registration

3

Identity Verification

Upload documents to verify your identity

4

Review & Submit

Confirm details and submit your application

Personal Information

Business Details

3

Identity Verification

4

Review & Submit

Usage example

Interactive 4-step form flow with validation.

1

Account Setup

Create login credentials

2

Business Details

Provide business information

3

Identity Verification

Upload verification documents

4

Review & Submit

Confirm and submit application

Account Setup

Usage Guidelines

Import

Import the progress tracker component in your module or component:

import-progress-tracker.ts

Copy code

Basic Implementation

Here is a basic example of using the progress tracker component:

1. Define items in TypeScript

my.component.ts

Copy code

2. Render in template

my.component.html

Copy code

Indicator Icons

Provide icons per item when using the icon indicator type.

1. Define icon items in TypeScript

my.component.ts

Copy code

2. Render with icon indicators

my.component.html

Copy code

Interactions

Listen for item clicks to reveal step content or change the active index.

1. Handle click in TypeScript

my.component.ts

Copy code

2. Bind click output

my.component.html

Copy code

4-Step Form Example

Use a progress tracker to drive a multi-step form with dynamic content.

1. Define steps and active index

my.component.ts

Copy code

2. Render tracker and step content

my.component.html

Copy code

All Available APIs

Example using all available APIs:

progress-tracker-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
items
VdProgressTrackerItem[]
[]
Yes
List of progress tracker items
direction
'horizontal' | 'vertical'
'vertical'
No
Layout direction of the tracker
indicatorType
'number' | 'icon'
'number'
No
Default indicator style for items (completed/error icons are fixed)
showDescription
boolean
true
No
Whether item descriptions are shown
showConnector
boolean
true
No
Show connector line between vertical items
defaultIcon
string
'vd-icon-placeholder'
No
Fallback icon when icon indicator has no icon

Outputs

Property
Type
Description
itemClick
EventEmitter<number>
Emits the index of the clicked item (default and completed only)

Best Practices

When to Use

  • Use Progress Tracker when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Progress Tracker when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use vertical layout for long forms to keep steps readable
  • Mark completed steps to build user confidence and reduce drop-off
  • Keep descriptions short and action-focused
  • Use icon indicators when steps are represented by recognizable symbols
  • Use error state only on the step that needs attention
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the progress tracker features in this section

Personal Information

Enter your name and contact details

2

Business Details

Provide company details and address

3

Verification

Submit required documents

4

Review

Confirm and submit your application

example.html

Copy code