> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Progress

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

## Features

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

### Anatomy

Import all parts and piece them together.

```jsx
import { Progress } from "@radix-solid/primitives";

export default () => <Progress.Root>

		<Progress.Indicator />

	</Progress.Root>;
```

## Accessibility

Adheres to the [`progressbar` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter).

## API Reference

### Root

Contains all of the progress parts.

| Prop                                                                                                                                                                                                                       | Type             | Default |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.                                                    | `boolean`        | `false` |
| `value`The progress value.                                                                                                                                                                                                 | `number \| null` | —       |
| `max`The maximum progress value.                                                                                                                                                                                           | `number`         | —       |
| `getValueLabel`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. | `function`       | —       |

| Data attribute | Values                                       |
| -------------- | -------------------------------------------- |
| `[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                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

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