# Progress Bar

![organizing info](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-237ec099988f5c2b60a2c237075e355d6c345098%2Fprogress-bar-web-control-v182-0.png?alt=media)

The Progress Bar Web Control creates a bar of progressive steps that a user will go through. It allows for a dynamic number of steps, customizing the look and feel, step labels, and navigation.

## General

### Control Properties

#### Value

Expects type `number`.

Defines the number of the step that should be highlighted as the current step in the Progress Bar. All the proceeding steps will change to their "completed" state when this value changes.

> 📘 **Unlike in some other indexing cases, step count begins with 1, not 0.**

#### Steps

Expects type `number`.

Displays the number of steps to be rendered in the Progress Bar. Each step will have a marker as both a click target and be able to have a label specified if desired.

#### Progress Labels

Expects type `list`.

Displays the description of the steps as an array of text values. For example:

```javascript
[  
  "Personal Info",  
  "Home Info",  
  "Insurance",  
  "Contact"  
]
```

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### Style and Layout

The Progress Bar is a compound control and it is possible to change the style of the sub-controls within it. Check [Common style properties of web controls](web-controls-overview/common-style-properties-of-web-controls) for details on how to style this Web Control.

## Actions

#### Value Changed

This event is run each time the Progress Bar steps change.

Metadata about this event can be accessed through the `event` namespace.

## Advanced

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the control will be visible. If `FALSE` the control will not be displayed. If the field is empty, the control will be visible.

## Example

Here's an example on how to change the size and color of the labels of a progress bar

![organizing info](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-2bf050cda481d3a663068b190df516ff3567f3bd%2Fprogress-bar-web-control-v182-1.gif?alt=media)
