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

The AnchorProgressIndicatorStep is typically used inside an AnchorProgressIndicator component to represent individual steps in a progress flow. See the Progress Indicator documentation for complete usage examples and integration patterns.

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 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>
</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 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>
</template>

Active Step

Pass the active prop to highlight the current step in the progress indicator.

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

Completed Step

Pass the completed prop to mark a step as finished.

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

Disabled Step

Pass the disabled prop to disable interaction with a step.

<template>
  <anchor-progress-indicator orientation="vertical">
    <anchor-progress-indicator-step label="Step 1" completed></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2" active></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3" disabled></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Sizes

Pass the size prop to control the size of the step indicator. Supports normal (default) and small.

<template>
  <anchor-progress-indicator orientation="vertical">
    <anchor-progress-indicator-step label="Normal step" size="normal" active></anchor-progress-indicator-step>
  </anchor-progress-indicator>
  <anchor-progress-indicator orientation="vertical">
    <anchor-progress-indicator-step label="Small step" size="small" active></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Hide Labels

Pass the hide-labels prop to hide the text label for a step, displaying only the step indicator.

<template>
  <anchor-progress-indicator orientation="vertical">
    <anchor-progress-indicator-step label="Step 1" hide-labels completed></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2" hide-labels active></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3" hide-labels></anchor-progress-indicator-step>
  </anchor-progress-indicator>
</template>

Accessibility

Each step label is announced by screen readers, providing clear context about the current position in the flow.
The active step uses aria-current="step" to indicate the current position to assistive technologies.
Completed steps are visually distinguished with a checkmark icon, and are communicated through the step's label and state to screen readers.
When using hide-labels, ensure the progress indicator as a whole provides sufficient context so users still understand what each step represents.
Keyboard users can navigate between interactive steps using standard navigation keys when steps are enabled.

API

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

Anchor version	Status	Notes
3.0	Ready for Implementation	This component is in sync with Figma.

Progress Indicator Step3.0