Meter
A measurement within a known range.
On this page
A meter shows a measurement within a known range: storage used, a score, a password's strength. Use .meter on a native <meter>. It has the shape of a progress bar, a thin well with an ink fill, but it means something else: progress is how far a task has come, a meter is where a quantity stands. When the figure is the point, as on a dashboard, a gauge draws the same reading on a dial.
Meter
<div class="flex flex-col gap-xs"> <div class="flex items-baseline justify-between text-sm"> <span class="fg-text-strong" id="storage">Storage</span> <span class="fg-text-muted">4.1 of 10 GB</span> </div> <meter class="meter" min="0" max="10" value="4.1" aria-labelledby="storage">4.1 of 10 GB</meter></div>#The element decides the tone
A <meter> knows what a good value is. Its low, high and optimum attributes divide the range, and the browser reports which part the value is in. The stylesheet maps that to ink:
- Where it should be: ink. A meter with no thresholds is always here.
- Off: the warning ink.
- Far off: the danger ink.
No class or script picks the color. Below, optimum="0" says low usage is good, and low="6" high="9" set the two thresholds.
Thresholds
<label class="field">3.2 of 10 GB used <meter class="meter" min="0" max="10" low="6" high="9" optimum="0" value="3.2">3.2 of 10 GB</meter></label><label class="field">7.4 of 10 GB used, getting full <meter class="meter" min="0" max="10" low="6" high="9" optimum="0" value="7.4">7.4 of 10 GB</meter></label><label class="field">9.6 of 10 GB used, almost out of space <meter class="meter" min="0" max="10" low="6" high="9" optimum="0" value="9.6">9.6 of 10 GB</meter></label>The label says the same thing as the color, in words, so the reading does not depend on hue.
#Sizes
The track is 6px thick. meter-sm is 4px and meter-lg is 8px.
Sizes
<meter class="meter meter-sm" value="0.3" aria-label="Small">30%</meter><meter class="meter" value="0.55" aria-label="Medium">55%</meter><meter class="meter meter-lg" value="0.8" aria-label="Large">80%</meter>#Segmented
meter-segmented cuts the track into equal pieces, for a reading that comes in levels. Set --meter-steps to the number of levels, four by default. The thresholds still pick the tone, so a password's strength needs no class and no script beyond setting value.
Segmented
<label class="field">Weak: add a few more characters <meter class="meter meter-segmented" min="0" max="4" low="2" high="3" optimum="4" value="1">1 of 4</meter></label><label class="field">Fair: add a symbol or a number <meter class="meter meter-segmented" min="0" max="4" low="2" high="3" optimum="4" value="2">2 of 4</meter></label><label class="field">Strong <meter class="meter meter-segmented" min="0" max="4" low="2" high="3" optimum="4" value="4">4 of 4</meter></label>#Browsers
Chromium and Firefox draw the meter as above. Safari keeps the platform's own meter, which reports the same value and the same three tones in its own style. The text inside <meter> is shown by a browser that does not draw the element at all.
#Accessibility
- Label the meter with a
fieldlabel,aria-labeloraria-labelledby. - A meter does not print its number. Write the reading beside it.
- For a task that completes, use progress; a meter has no indeterminate state.
#Classes
| Class | Description |
|---|---|
meter | A native meter element with a label: a 6px well with a fill whose tone follows low, high and optimum. The text inside the element is a fallback |
meter-sm | A 4px track; the default is 6px. With meter |
meter-lg | An 8px track; the default is 6px. With meter |
meter-segmented | The track in --meter-steps equal pieces, four by default, for a reading that comes in levels. With meter |
#Custom properties
| Property | Default | Description |
|---|---|---|
--meter-height | .375rem | Track thickness |
--meter-steps | 4 | Number of pieces of a segmented track; set it to the number of levels. On meter-segmented |