Installation
Usage
Components
Meter (Root)
number
required
Current value.
number
default:"0"
Minimum value.
number
default:"100"
Maximum value.
number
Optimal value.
number
Low threshold.
number
High threshold.
MeterLabel
Label for the meter.MeterTrack
Background track.MeterIndicator
Filled portion indicating the value.MeterValue
Displays the current value as text.Examples
Storage Meter
Battery Level
With Thresholds
The Meter component differs from Progress - use Meter for measurements (like disk usage), and Progress for task completion.
Accessibility
- Built on @base-ui/react Meter primitive
- Proper role=“meter” attribute
- ARIA attributes for value and range
- Screen reader support for value announcements