# Progress indicator URL: /docs/vuecomponents/progress-indicator The Progress Indicator is a component that shows the user the steps they need to take to complete a form. ## Installation [#installation] npm pnpm yarn bun ```bash npm i @tryg/vue-ui-library ``` ```bash pnpm add @tryg/vue-ui-library ``` ```bash yarn add @tryg/vue-ui-library ``` ```bash bun add @tryg/vue-ui-library ``` ## Usage [#usage] Install the component library as a Vue plugin. This globally registers all Anchor components. ```vue title="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'); ``` ```vue title="YourComponent.vue" ``` Import only the components you need for optimal bundle size. ```vue title="YourComponent.vue" ``` 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 [#dynamic-current-step] Use Vue's `ref` to dynamically update the current step. ```vue ``` ### Alternative labels [#alternative-labels] ```vue ``` ### Hide labels [#hide-labels] ```vue ``` ### Is advancing [#is-advancing] ```vue ``` ### Is continuing [#is-continuing] ```vue ``` ### Small [#small] ```vue ``` ### Vertical orientation [#vertical-orientation] ```vue ``` ## Accessibility [#accessibility] * Uses a `