---
url: /docs/components/page-indicator/frameworks/elements.md
---
# Page indicator - Elements

A page indicator shows the total amount of pages (or images) and the current page using dots.

## Accessibility

## Usage

```html
<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>
```

## Examples

```html
<w-page-indicator selected-page="3" page-count="5"></w-page-indicator>
```

## Styling API

## `<w-page-indicator>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| ariaLabel (JS only) | `unknown` | `groupLabel` | - |
| page-count | `number` | `1` | Total number of pages |
| role (JS only) | `string` | `"img"` | - |
| selected-page | `number` | `1` | Currently selected page (1-based index) |

### Property Details

#### ariaLabel (JS only)

* Type: `unknown`
* Default: `groupLabel`

#### page-count

Total number of pages

* Type: `number`
* Default: `1`

#### role (JS only)

* Type: `string`
* Default: `"img"`

#### selected-page

Currently selected page (1-based index)

* Type: `number`
* Default: `1`