Progress

<Description> Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. </Description> <HeroContainer> <ProgressDemo /> </HeroContainer> <HeroCodeBlock folder="Progress" />

Installation

Install the component from your command line.

bash

npm install @radix-ui/react-progress

Anatomy

Import all parts and piece them together.

jsx

import { Progress } from "radix-ui";

export default () => (
	<Progress.Root>
		<Progress.Indicator />
	</Progress.Root>
);

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		type: "number | null",
		description: "The progress value.",
	},
	{
		name: "max",
		type: "number",
		description: "The maximum progress value.",
	},
	{
		name: "getValueLabel",
		type: "(value: number, max: number) => string",
		typeSimple: "function",
		description:
			"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.",
	},
]}

Indicator

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}