Skip to content
Relements Relements

Meter

Native <meter> styled with .re-meter, for measurements within a known range. low, high, and optimum drive the tone.

Ranges

Section titled “Ranges”
Live example
<div class="stack">
  <label class="re-field">
    <span class="re-field__label">Disk usage (optimum 0–60)</span>
    <meter
      class="re-meter"
      id="mt-ok"
      min="0"
      max="100"
      low="60"
      high="85"
      optimum="30"
      value="40"
    ></meter>
  </label>
  <label class="re-field">
    <span class="re-field__label">Disk usage (suboptimum)</span>
    <meter
      class="re-meter"
      id="mt-warn"
      min="0"
      max="100"
      low="60"
      high="85"
      optimum="30"
      value="75"
    ></meter>
  </label>
  <label class="re-field">
    <span class="re-field__label">Disk usage (critical)</span>
    <meter
      class="re-meter"
      id="mt-bad"
      min="0"
      max="100"
      low="60"
      high="85"
      optimum="30"
      value="95"
    ></meter>
  </label>
</div>

Sizes

Section titled “Sizes”
Live example
<div class="stack">
  <meter class="re-meter" id="mt-sm" data-size="sm" min="0" max="100" value="50"></meter>
  <meter class="re-meter" id="mt-md" min="0" max="100" value="50"></meter>
  <meter class="re-meter" id="mt-lg" data-size="lg" min="0" max="100" value="50"></meter>
</div>

Accessibility

Section titled “Accessibility”
  • Semantics — a native <meter> exposes the implicit meter role, and its value, min, max, low, high, and optimum attributes are surfaced to assistive tech as the current value and range. It isn’t focusable or interactive, so there’s no keyboard model. Give it an accessible name by wrapping it in a .re-field <label> (as the examples do) — the .re-field__label text is read with the value.
  • Notes — the green/yellow/red fill is derived by the browser from low/high/optimum, the same thresholds that define the element’s value semantics, so the measurement’s standing is never carried by color alone. data-size only changes the bar’s thickness. Use <meter> for a measurement within a known range, not task completion over time — reach for progress instead. See the accessibility guide.