Root Props
| Prop | Type | Default |
|---|---|---|
size | MeterSize | 'md' |
| Visual size of the meter component. Typically maps to predefined size tokens in a design system. | ||
variant | MeterVariant | 'primary' |
| Visual variant of the meter (e.g., for styling themes). | ||
max | number | 1 |
| Maximum possible value of the meter. Default is 1. | ||
min | number | 0 |
| Minimum possible value of the meter. Default is 0. | ||
valuerequired | number | — |
The current numeric value displayed by the meter. Required. Clamped between min and max. | ||
valueText | string | — |
| Visually hidden accessible label for screen readers, describing the current value (e.g., "60% fuel"). | ||
fullWidth | boolean | — |
| Whether the meter should expand to fill the width with its container. | ||
optimum | number | — |
| The "optimal" value for the meter. Used to determine which region (low, high, optimum) is preferred. | ||
low | number | — |
| The lower threshold for suboptimal values. If the value is below this, it may be considered "bad". | ||
high | number | — |
| The upper threshold for suboptimal values. If the value is above this, it may be considered "bad" (if optimum is low). | ||
Also accepts all <div> attributes.
Child Parts
MeterTrack: visible measured-fill track.
MeterTrack
Also accepts all <div> attributes.
Types
MeterPropsMeterTrackPropsMeterSizeMeterVariant
State Model
Meteris always value-driven rather than indeterminate.- Threshold props can change semantic state from neutral to good, warn, or bad.