Chapter 29: Meter

Core Idea

A read-only gauge (not interactive, unlike Progress/Slider) for displaying a static measurement against a range — battery level, disk usage, a rating — rendering the native meter/progressbar accessibility role with a formatted value text.

Key Concepts

• Anatomy: Root → Label, Track → Indicator, Value.
• value is required on Root (marked with *) — Meter always displays a specific measurement, unlike Progress which supports an indeterminate state.
• Value formatting: format/locale on Root control number formatting (e.g. percentages, units) shown by Value; aria-valuetext/getAriaValueText override the accessible text independently of the visual formatting when they need to differ.
• min/max: define the gauge's range, defaulting to the standard 0–100 if omitted.

Reference Tables

Part	Notable props
Root	value (required), min, max, format, locale, aria-valuetext, getAriaValueText
Indicator / Track / Label / Value	styling-only parts, no component-specific props

Key Takeaways

1. Use Meter for static, read-only measurements (battery, storage, score) — use Progress instead for an operation's completion status, especially if it can be indeterminate.
2. Set getAriaValueText whenever the visually formatted value (e.g. "72%") needs a more descriptive screen-reader announcement (e.g. "72 percent full, 3.6 of 5 GB used").

Connects To

• ch035 (Progress): the interactive-operation counterpart to this static gauge.