# Progress (/docs/progress)
## API Reference [#api-reference]
## Basic [#basic]
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function ProgressDemo() {
return (
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
`Progress` groups the text label, formatted value, and visual bar for one long-running task.
The bar structure is rendered automatically so consumers only compose the visible text slots.
```text
Progress[value]
├─ ProgressLabel
├─ ProgressValue
└─ track
└─ indicator
```
```tsx
import { Progress, ProgressLabel, ProgressValue } from 'moduix';
export function ProgressDemo() {
return (
);
}
```
| Part | Role |
| --------------- | --------------------------------------------------------------------------------------------------------- |
| `Progress` | Root state machine. Controls `value`, `min`, `max`, formatting, and accessible progress attributes. |
| `ProgressLabel` | Optional text label associated with the progress root. |
| `ProgressValue` | Optional formatted value text. It can render the default formatted value or use a child render function. |
| `track` | Internal visual rail rendered by `Progress`. Customize it with CSS variables or `classNames.track`. |
| `indicator` | Internal filled bar rendered inside the track. Customize it with CSS variables or `classNames.indicator`. |
`Progress` does not expose `ProgressTrack` or `ProgressIndicator` in the public composition.
Use the default internal bar for normal cases and reach for `classNames` only when slot-level
track or indicator styling is needed.
## Composition [#composition]
Use `value={null}` for indeterminate work, or pass a number with optional `min` and `max` for
known progress. `locale`, `format`, `aria-valuetext`, and `getAriaValueText` come from the root
and keep the visual value and accessibility text aligned.
Style the root with `className`. Style the automatically rendered visual bar with CSS variables,
or pass `classNames={{ track, indicator }}` when the track or indicator needs its own selector.
`ProgressLabel` and `ProgressValue` remain regular visible slots and accept their own `className`
and `render` props from Base UI.
## Examples [#examples]
### Controlled [#controlled]
Keep the value in React state when progress mirrors another control, upload, export, or background task.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
import { useState } from "react";
export function ControlledProgressDemo() {
const [value, setValue] = useState(45);
return (
{
setValue(Number(event.target.value));
}}
/>
);
}
`}
### Min Max Range [#min-max-range]
Use `min` and `max` when the current value belongs to a custom range instead of the default `0` to `100`.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function MinMaxRangeProgressDemo() {
return (
);
}
`}
### Locale And Format [#locale-and-format]
Use `locale`, `format`, and a custom `ProgressValue` child function to format progress text for users.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function LocaleAndFormatProgressDemo() {
return (
);
}
`}
### Indeterminate [#indeterminate]
Pass `value={null}` when the task is running but the current completion percentage is unknown.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function IndeterminateProgressDemo() {
return (
);
}
`}
### Aria Value Text [#aria-value-text]
Use `aria-valuetext` when the numeric value needs a more descriptive accessible label.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function AriaValueTextProgressDemo() {
return (
);
}
`}
### Custom Value Text [#custom-value-text]
Use `getAriaValueText` with custom rendered value text when visual and accessible wording should stay aligned.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
export function CustomValueTextProgressDemo() {
return (
);
}
`}
### Custom Styles [#custom-styles]
`Progress` renders the track and indicator automatically. Use `className` for the root and `classNames` for the internal track or indicator slots.
{`
import {
Progress,
ProgressLabel,
ProgressValue,
} from "moduix";
import styles from "./progress-demo.module.css";
export function CustomStylingProgressDemo() {
return (
);
}
`}
{`
.customProgress {
--progress-width: 16rem;
--progress-track-height: 0.75rem;
--progress-track-bg: var(--color-accent);
}
.customTrack {
box-shadow: inset 0 0 0 var(--border-width-md)
color-mix(in oklab, var(--color-primary), transparent 75%);
}
.customIndicator {
background: linear-gradient(90deg, var(--color-primary), var(--color-chart-2));
}
`}