Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

View code

Features

Provides context for assistive technology to read the progress of a task.

Installation

Install the component from your command line.

$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue

<script setup>
import { ProgressIndicator, ProgressRoot } from 'reka-ui'
</script>

<template>
  <ProgressRoot>
    <ProgressIndicator />
  </ProgressRoot>
</template>

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`getValueLabel`	`${Math.round((value / max) * DEFAULT_MAX)}%`	`((value: number, max: number) => string)` A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.
`max`	`DEFAULT_MAX`	`number` The maximum progress value.
`modelValue`		`number \| null` The progress value. Can be bind as `v-model`.

Emit	Payload
`update:max`	`[value: number]` Event handler called when the max value changes
`update:modelValue`	`[value: string[]]` Event handler called when the progress value changes

Slots (default)	Payload
`modelValue`	`number \| null \| undefined` Current input values

Methods	Type
`getValueLabel`	`(value: number, max: number) => string` A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

Data Attribute	Value
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Progress ​

Features ​

Installation ​

Anatomy ​

Accessibility ​

API Reference ​

Root ​

Indicator ​