We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-progress-indicator current-index="2">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorProgressIndicator, AnchorProgressIndicatorStep } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-progress-indicator current-index="2">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

The Progress Indicator is a component that shows the user the steps they need to take to complete a form. It is a visual representation of the steps in a process, and it can be used to guide the user through a form or to show the user how far they have come in a survey.

Dynamic current step

Use Vue's ref to dynamically update the current step.

<script setup>
import { ref } from 'vue';
const currentIndex = ref(0);
</script>
<template>
  <div style="width: 100%;">
    <anchor-progress-indicator :current-index="currentIndex">
      <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
      <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
      <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
      <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
    </anchor-progress-indicator>
    <anchor-button variant="primary" color="brand" @click="currentIndex = 2">Go to Step 3</anchor-button>
  </div>
</template>

Alternative labels

<template>
  <anchor-progress-indicator current-index="2" alt-labels>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Hide labels

<template>
  <anchor-progress-indicator current-index="2" hide-labels>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Is advancing

<template>
  <anchor-progress-indicator current-index="2" is-advancing>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Is continuing

<template>
  <anchor-progress-indicator current-index="2" is-continuing>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Small

<template>
  <anchor-progress-indicator current-index="2" size="small">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Vertical orientation

<template>
  <anchor-progress-indicator current-index="2" orientation="vertical">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Accessibility

Uses a <nav> element with aria-label="progress" to create a navigation landmark for the step indicator.
The active step is indicated using aria-current="step", allowing screen readers to announce the user's current position in the flow.
Dividers between steps use role="separator" with aria-orientation matching the component orientation (horizontal or vertical).
The current-index prop controls which step is announced as active, keeping screen reader users oriented within the process.
The alt-labels and hide-labels props allow customization of the labels exposed to assistive technology.

API

Progress indicator

anchor-progress-indicator

Properties

Property	Attribute	Description	Type	Default
`altLabels`	`alt-labels`	Use alternative labels for the steps	`boolean`	`false`
`currentIndex`	`current-index`	Which index is this step in the progress indicator	`number`	`0`
`hideLabels`	`hide-labels`	Hide the labels for the steps	`boolean`	`false`
`isAdvancing`	`is-advancing`	Is advancing the progress indicator flow	`boolean`	`false`
`isContinuing`	`is-continuing`	Is continuing the progress indicator flow	`boolean`	`false`
`orientation`	`orientation`	Orientation of the progress-indicator component	`"horizontal" \| "vertical"`	`'horizontal'`
`size`	`size`	Size of the progress-indicator component and it's steps	`"normal" \| "small"`	`'normal'`

Dependencies

Depends on

anchor-label

Graph

graph TD;
  anchor-progress-indicator --> anchor-label
  style anchor-progress-indicator fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Progress indicator step

anchor-progress-indicator-step

Properties

Property	Attribute	Description	Type	Default
`active`	`active`	Is this step active	`boolean`	`false`
`altLabels`	`alt-labels`	Use alternative labels for the step	`boolean`	`false`
`completed`	`completed`	Is this step complete	`boolean`	`false`
`disabled`	`disabled`	Is this step disabled	`boolean`	`false`
`hideLabels`	`hide-labels`	Hide the label for the step	`boolean`	`false`
`index`	`index`	Which index is this step in the progress indicator	`number`	`0`
`isFirst`	`is-first`	Is this the first step	`boolean`	`false`
`isLast`	`is-last`	Is this the last step	`boolean`	`false`
`label`	`label`	Label for the step	`string`	`undefined`
`orientation`	`orientation`	Orientation of the step component	`"horizontal" \| "vertical"`	`'vertical'`
`size`	`size`	Size of the step component	`"normal" \| "small"`	`'normal'`

Events

Event	Description	Type
`click`		`CustomEvent<any>`

Dependencies

Depends on

Graph

graph TD;
  anchor-progress-indicator-step --> anchor-icon
  anchor-progress-indicator-step --> anchor-label
  style anchor-progress-indicator-step fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Progress indicator3.0

Installation

Usage

Dynamic current step

Alternative labels

Hide labels

Is advancing

Is continuing

Small

Vertical orientation

Accessibility

API

Progress indicator

anchor-progress-indicator

Properties

Dependencies

Depends on

Graph

Progress indicator step

anchor-progress-indicator-step

Properties

Events

Dependencies

Depends on

Graph

On this page