Skip to content
Navius

Progress

Overview

Section titled “Overview”

Progress renders a role="progressbar" that reads Value against Max, supporting an indeterminate state when Value is null. It validates rather than clamps: a value below 0 or above Max is treated as indeterminate rather than coerced into range. Every part shares the same discrete state (complete, indeterminate, progressing) via a cascaded context.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.Progress


<NaviusProgress>
    <NaviusProgressLabel />
    <NaviusProgressTrack>
        <NaviusProgressIndicator />
    </NaviusProgressTrack>
    <NaviusProgressValue />
</NaviusProgress>

Root

Section titled “Root”

Contains all of the progress parts. Renders a div with role="progressbar".

Prop Type Default Description
Value double? null Current value. null renders an indeterminate progress bar.
Max double 100 Maximum value.
GetValueLabel Func<double?, double, string?>? - Optional accessible value text builder. When omitted, a determinate bar renders {Math.Round((value / max) * 100)}%; indeterminate renders no aria-valuetext.
ChildContent RenderFragment? - The progress’s parts.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Track

Section titled “Track”

The visual rail that contains the Indicator. Renders a div.

Prop Type Default Description
ChildContent RenderFragment? - The Indicator.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Indicator

Section titled “Indicator”

Used to visually show the progress. Renders a div.

Prop Type Default Description
ChildContent RenderFragment? - Indicator content.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Value

Section titled “Value”

Renders the formatted value. Renders a span.

Prop Type Default Description
ChildContent RenderFragment? - Overrides the default text. Defaults to the rounded percentage, or nothing while indeterminate.
Attributes IDictionary<string, object>? - Forwarded to the rendered span.

Label

Section titled “Label”

An accessible label; the Root wires aria-labelledby to it when mounted. Renders a span.

Prop Type Default Description
ChildContent RenderFragment? - Label content.
Attributes IDictionary<string, object>? - Forwarded to the rendered span.

Data attributes

Section titled “Data attributes”
Part Attribute Description
Root, Track, Indicator, Value, Label data-complete Present when the value equals the max.
Root, Track, Indicator, Value, Label data-indeterminate Present when the value is null.
Root, Track, Indicator, Value, Label data-progressing Present while determinate and in progress.
Root, Indicator data-value The current value as a string; omitted while indeterminate.
Root, Indicator data-max The max value as a string; always present.

ARIA mechanism

Section titled “ARIA mechanism”

Implements the progressbar role. The Root sets aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from the resolved value, and omits aria-valuenow and aria-valuetext while indeterminate. aria-labelledby is wired to the Label’s id only when a Label is mounted. A progress bar is not interactive, so it has no keyboard interactions. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.