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" />

The percent readout is derived from value / min / max and shown next to the bar. value below min or above max is clamped by 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 the surface / text roles from the active theme (--on-surface for the value readout) and the native <meter>'s own appearance for the bar. No status role is applied; the meter is a neutral scalar display, not a status indicator.

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

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

Attributes

Slots

The meter is self-contained; label, bar, and value are composed by the element. Pass content via props, not slotted children.

CSS classes

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

Theme roles