Meter

Indicators

Open in Storybook: Meter (opens in a new tab)

Overview

A native meter for a read-only measurement inside a known range: fuel, storage used, a battery, a score. The browser maps min, max and value to the accessibility tree, so the component adds only what the browser leaves out: the status in words and a shape, the value in words, and the design around it. The browser paints the zone and says nothing about it, so the status is worked out from low, high and optimum.

It is never focusable and never interactive. A value the user sets is a range, a task moving forward is a progress, and a rating the user gives is a radio group.

Anatomy

Usage

Use cases

The eight of the design, each the real component, and each works: move the slider under it to try a value and see the zone, the word and what a screen reader says.

• Fuel level

  Higher is better.

  Fuel level80 out of 100, good

  Good· 80 / 100

  Fuel level: try a value

  Says “80 out of 100, good”.

  min=0 max=100 low=33 high=66 optimum=80 value=80

• Storage used

  Lower is better.

  Storage12.4 of 16 GB used, filling up

  Filling up· 12.4 / 16 GB

  Storage used: try a value

  Says “12.4 of 16 GB used, filling up”.

  min=0 max=16 low=8 high=13 optimum=4 value=12.4

• Battery

  Higher is better, warn when low.

  Battery15%, low

  Low· 15%

  Battery: try a value

  Says “15%, low”.

  min=0 max=100 low=20 high=80 optimum=100 value=15

• Password strength

  0 to 4, higher is better.

  Password strengthWeak

  Weak

  Password strength: try a value

  Says “Weak”.

  min=0 max=4 low=2 high=3 optimum=4 value=1

• Coffee intensity

  Custom squares, no zones.

  Intensity

  7 out of 10

  7 / 10

  Coffee intensity: try a value

  Says “7 out of 10”.

  min=0 max=10 value=7

• Product rating

  Static info only.

  Rating

  4 out of 5 stars

  4 / 5

  Product rating: try a value

  Says “4 out of 5 stars”.

  min=0 max=5 value=4

• Accessibility score

  Higher is better.

  Audit score92 out of 100, good

  Good· 92 / 100

  Accessibility score: try a value

  Says “92 out of 100, good”.

  min=0 max=100 low=50 high=90 optimum=100 value=92

• Room humidity

  Middle is best.

  Humidity45%, comfortable

  Comfortable· 45%

  Room humidity: try a value

  Says “45%, comfortable”.

  min=0 max=100 low=30 high=60 optimum=45 value=45

Props

Example

words is what turns the zone into a word and a shape. The meter says "20 out of 100, low".

import { Meter } from '@/components/Meter'

<Meter
  label="Fuel level"
  value={20}
  max={100}
  low={33}
  high={66}
  optimum={80}
  words={{ low: 'Low', middle: 'Medium', high: 'Good' }}
/>

Specs

Measurements

Zones

low and high cut the range in three. optimum says which region is the good one, and the other two are ranked by their distance from it. The word and the icon follow the same rule as the fill, so they never disagree with it.

Zone by optimum

Layout

The breakpoints are container queries in rem, so they follow the room the field has and the size of the text: a field in a narrow card stacks on a wide screen. One DOM, only the CSS changes. Each use case is a story in Storybook. Pick the width in the viewport menu of the toolbar, for any story: 640 CSS px · 200% zoom or 320 CSS px · 400% zoom.

Attributes

Bar parts

Markup

<label for="fuel">Fuel level</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20"
       aria-valuetext="20 out of 100, low">20 out of 100, low</meter>
<p aria-hidden="true"><svg focusable="false">…</svg> Low · 20 / 100</p>

Script

const WORDS = { low: 'Low', middle: 'Medium', high: 'Good' }   // by region, never by colour

// A value on a boundary joins the optimum's region, as in the browsers
function where({ low, high, optimum, value }) {
  const side = (n) => (n < low ? 'low' : n > high ? 'high' : 'middle')
  const good = side(optimum)
  const region =
    good === 'low' ? (value <= low ? 'low' : value <= high ? 'middle' : 'high')
    : good === 'high' ? (value >= high ? 'high' : value >= low ? 'middle' : 'low')
    : side(value)
  const zone = region === good ? 'best' : region === 'middle' || good === 'middle' ? 'middle' : 'worst'
  return { region, zone }
}

function render(meter, status) {     // meter.low, .high, .optimum: the browser resolves them
  const { region, zone } = where(meter)
  const text = `${meter.value} out of ${meter.max}, ${WORDS[region].toLowerCase()}`
  meter.setAttribute('aria-valuetext', text)
  meter.textContent = text
  status.dataset.zone = zone          // picks the icon and the colour
  status.lastChild.textContent = ` ${WORDS[region]} · ${meter.value} / ${meter.max}`
}

Tokens

Component tokens

Guidelines

Content

Behavior

Alternatives

Accessibility

Keyboard

Roles and properties

Screen reader

A meter is static: it shows a value, not the progress of that value, and announces nothing. A changed value is read when the user reaches the meter. The exact words differ by screen reader, browser and platform.

Measured behavior

Chromium 148 and 149, WebKit 26.4.

Support

The Firefox rules follow the design and have not been run.

WCAG criteria

Related

This section is still in progress.

References

This section is still in progress.