Meter
Meter — how much of something there is.
Examples
Disk used
Battery
<p id="disk-label">Disk used</p>
<meter class="meter" aria-labelledby="disk-label"
min="0" max="100" low="25" high="75" optimum="0" value="90">90%</meter>
<p id="battery-label">Battery</p>
<meter class="meter" aria-labelledby="battery-label"
min="0" max="100" low="25" high="75" optimum="100" value="90">90%</meter>optimum says where good is, not what the good value is. Disk usage is bad when high, so optimum="0" and 90 paints as danger; a battery is good when high, so optimum="100" and the same 90 paints as optimum.
Getting it backwards turns the colours inside out, and it is the usual bug.
Tokens 8
Level 2, declared on .meter itself. Set any of them on that selector to restyle this component without touching the skin.
| Token | Default |
|---|---|
| --meter-track-padding | 4px |
| --meter-even-less-good-color | var(--color-danger) |
| --meter-optimum-color | var(--color-success) |
| --meter-suboptimum-color | var(--color-warning) |
| --meter-block-size | 1.25rem |
| --meter-radius | var(--radius-full) |
| --meter-track-border-color | var(--color-border) |
| --meter-track-color | var(--color-surface-sunken) |
Variants and states
Variants
.meter-lg.meter-sm
State it reads
None.
Before you ship it
What you have to do 1 requirements
- Give it a name.
<meter>is a labelable element, so<label for>does compute a name in current engines;aria-labelledbypointing at the text that already names the measurement is usually the better markup, andaria-labelis the fallback. An unnamed meter announces a bare number. Put text between the tags.<meter …>7 out of 10</meter>is what a browser without<meter>support renders, and it is the sentence a human would say. It is not the accessible name — that comes from the label above — but the fallback is free and there is no reason to omit it. Do not rely on colour alone. The three states differ only in hue, which is a WCAG 1.4.1 failure on its own. The number, or a word ("Weak", "Nearly full"), must appear as text next to the meter.<meter>is not a live region. A meter that changes value announces nothing. A meter usually describes a standing quantity and does not need to — but if yours updates in response to what the user is doing (password strength as they type), put the verdict in a sentence next to it and mark thataria-live="polite", updating it when the band changes rather than on every keystroke. The value is not visible. This component paints a bar, not a number;::before/::afterdo not apply to a replaced element. Write the figure in your own markup.
src/css/components/meter.css · npx mostlycss add meter