# PageIndicator (w-page-indicator)

## Description

A page indicator component that displays a series of dots representing pages.

One dot is highlighted to indicate the currently selected page.

[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)

## Usage

<elements-example>

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

</elements-example>

## Accessibility

## Examples

<elements-example>

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

</elements-example>

## 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 |
|-|-|-|-|
| page-count | `number` | `1` | Total number of pages |
| selected-page | `number` | `1` | Currently selected page (1-based index) |

### Property Details

#### page-count

Total number of pages

- Type: `number`
- Default: `1`

#### selected-page

Currently selected page (1-based index)

- Type: `number`
- Default: `1`