Meter
Read-only progress bar with optional label, description, and formatted value — not an interactive slider.
Base UI
Meter shows a scalar value on a track with Base UI meter semantics. value, min, and max feed an accessible meter that users do not drag. Optional label uses the shared field-label pattern; description adds muted helper copy below the track; renderValue shows the current amount beside the label (true for default formatting, or a function for custom text).
The indicator width follows value automatically. Reach for Meter when the fill level is known and read-only — storage quotas, completion percentages, capacity. Prefer IconMeter for discrete icon-row scores, Gauge for a polar dial, Slider when someone must adjust the value, and LinearProgress for in-progress tasks or indeterminate work.
When to use
- Known min/max fill levels the user should see but not edit
- Quotas, completion, or capacity with an optional formatted readout
When not to use
- Discrete icon-row scores (stars, hearts, pips) → IconMeter
- Polar dial or needle → Gauge
- Interactive adjustment → Slider
- In-progress or indeterminate task progress → LinearProgress
Related
- IconMeter — discrete filled / half / empty icon row
- Gauge — round dial for determinate readings
- Slider — editable value on a track
- LinearProgress — task progress bars
- Spinner — compact in-flight wait states
Common examples
Labeled value
A labeled meter with renderValue is the baseline dashboard pattern. Optional description clarifies what the fill represents.
Custom value slot
Pass a function to renderValue when the readout needs units instead of the default formatted string. The callback receives the Base UI formatted string and the numeric value.
Highlight variants
Use highlight variant names when the track and indicator should share a semantic color — health, warning, danger. Stack a few related metrics; do not dump every highlight token.
Password strength
A password rule score maps cleanly onto Meter: each passed rule raises value, and variant shifts from yellow to green once the password is good. Pair the track with a short strength label so people can see what the fill means.
Ask your agent
Add a storage-used meter on this account settings card — used GB out of 100 GB cap, with short description of what counts toward the quota. Read-only here, not editable.Last updated on