Meter

Meters display a scalar value within a known range (storage used, quiz score, or battery level) without implying user input.

Try it

Usage

Set value, min, and max to define the range. Add label text so the measurement is self-explanatory, it is also the accessible name.

import { RuiMeter } from '@ecopages/radiant-ui/meter';
 
<RuiMeter value={72} min={0} max={100} label="Storage used" />Copy

The percent readout is derived from value / min / max and shown next to the bar. value below min or above max is clamped to the range, so the bar and readout stop at 0% / 100% like the native element.

Meter vs progress bar

Use Meter for static measurements. Use a progress element when showing completion of an in-flight task.

Theming

Meters use primary for the filled bar, track tokens for the unfilled track (--rui-track-fill, overridable with --rui-track-color on an ancestor), and --radius-control for corner rounding so the bar follows the active radius pack (default, soft, or sharp). The value readout uses --on-surface. No status role is applied; the meter is a neutral scalar display, not a status indicator.

Override bar chrome on the host:

rui-meter {
	--rui-meter-fill-color: var(--primary);
	--rui-meter-radius: var(--radius-control);
}Copy

<RuiMeter value={72} min={0} max={100} label="Storage used" />Copy

Accessibility

• The bar is the native <meter> element, exposing role="meter" with aria-valuenow, aria-valuemin, and aria-valuemax.
• Include a text label describing what is being measured; the numeric readout is decorative (aria-hidden="true").
• Supplement the bar with a numeric value when precision matters.

API

RuiMeter is a Derived Tree host (<rui-meter>): the element render() owns the label, native <meter>, and percent readout. Pass props only; there is no authored child contract.

Attributes

CSS classes

Public BEM classes on the composed light-DOM surface (documented via @cssclass on the element):

CSS custom properties

Theme roles