Skip to content
Navius

Meter

Overview

Section titled “Overview”

Meter is a static readout of a value inside a known range (disk usage, a score), not a progress bar: it is always determinate and has no indeterminate state. The Root resolves Value clamped into [Min, Max] and cascades a min-aware fraction, (value - min) / (max - min), so every part reads the same number. It exposes no state data-* attributes and no CSS variables, so the Indicator is a plain container the consumer sizes from the percentage.

Anatomy

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


<NaviusMeter>
    <NaviusMeterLabel />
    <NaviusMeterTrack>
        <NaviusMeterIndicator />
    </NaviusMeterTrack>
    <NaviusMeterValue />
</NaviusMeter>

Root

Section titled “Root”

Contains all of the meter parts and owns the resolved value. Renders a div with role="meter".

Prop Type Default Description
Value double 0 Current value, clamped into [Min, Max].
Min double 0 Minimum value.
Max double 100 Maximum value. A Max at or below Min falls back to Min + 100.
GetValueLabel Func<double, string?>? - Optional accessible value-text builder (e.g. v => $"{v} GB"). When omitted, aria-valuetext is the rounded percentage.
ChildContent RenderFragment? - The meter’s parts.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

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.

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”

The filled portion. Headless: it carries no width of its own, and exposes a Percentage property (the min-aware 0..100 completion) for the consumer to size it from. 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, defaulting to the rounded percentage. Renders a span.

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

Data attributes

Section titled “Data attributes”
Part Attribute Description
Root data-navius-meter Present on the root element.
Label data-navius-meter-label Present on the label.
Track data-navius-meter-track Present on the track.
Indicator data-navius-meter-indicator Present on the indicator.
Value data-navius-meter-value Present on the value.

A meter has no state data-* attributes: it is always determinate, so there is no open, disabled, or indeterminate state to reflect.

ARIA mechanism

Section titled “ARIA mechanism”

Implements the meter role. The Root sets aria-valuemin, aria-valuemax and aria-valuenow from the resolved (clamped) value, and aria-valuetext from GetValueLabel or, by default, the rounded percentage. aria-labelledby is wired to the Label’s id only when a Label is mounted, so no dangling IDREF is emitted when it is absent. A meter 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.