meter

Displays a scalar measurement within a known range, like a gauge. The meter automatically changes color based on whether the value is in the optimum, suboptimum, or poor range.

When to Use

  • Displaying disk space usage
  • Password strength indicators
  • Poll results or voting percentages
  • Budget utilization
  • Score or rating displays

Use progress instead for tasks that are in progress (like file uploads or loading states).

Basic Usage

A simple meter showing a value within a range.

70% 85%

Code

<label>Storage Used</label> <meter value="0.7" min="0" max="1">70%</meter> <label>Battery Level</label> <meter value="85" min="0" max="100">85%</meter>

Meter Attributes

Attribute Purpose Default
value Current value (required) -
min Minimum possible value 0
max Maximum possible value 1
low Upper bound of low range min
high Lower bound of high range max
optimum Optimal value (affects color) midpoint

Optimum Range Behavior

The meter's color changes automatically based on where the value falls relative to the optimum attribute.

High Optimum (like battery or score)

When optimum is in the high range, low values show red and high values show green.

90% 50% 20%

Low Optimum (like disk usage or errors)

When optimum is in the low range, high values show red and low values show green.

20% 50% 90%

Code

<!-- High optimum (higher is better, like battery) --> <meter value="0.9" min="0" max="1" low="0.3" high="0.7" optimum="0.9">90%</meter> <!-- Low optimum (lower is better, like disk usage) --> <meter value="0.2" min="0" max="1" low="0.3" high="0.7" optimum="0.1">20%</meter>

Size Variants

Different heights for various contexts.

60% 60% 60% 60%

Code

<meter class="xs" value="0.6">60%</meter> <meter class="s" value="0.6">60%</meter> <meter value="0.6">60%</meter> <!-- default --> <meter class="l" value="0.6">60%</meter>

Segmented Meter

Visual segmentation for discrete levels.

70%

Code

<meter class="segmented" value="0.7">70%</meter>

Labeled Meter

Use the .labeled wrapper pattern for meters with percentage displays.

71.5%
85%

Code

<div class="labeled"> <label> <span>Storage</span> <span>14.3 GB / 20 GB</span> </label> <meter value="14.3" min="0" max="20">71.5%</meter> </div>

With Output Element

Use output to display the current value dynamically.

45%

Real-World Examples

Password Strength

65%

Budget Usage

75%
90%

Survey Results

87%

Accessibility Notes

  • Include fallback text: Content between tags is shown if meter is not supported
  • Use labels: Always associate a label with the meter
  • Provide context: Include units or percentages in visible text
  • Don't rely on color alone: Accompany color changes with text indicators
  • Screen reader support: Meters are announced as "X out of Y"

Meter vs Progress

Use meter Use progress
Static measurements Tasks in progress
Disk space, battery level File uploads, loading
Has optimum value ranges Has determinate/indeterminate states
Gauge-like display Progress bar display

CSS Reference

meter { appearance: none; display: block; inline-size: 100%; block-size: var(--size-s); border: none; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-raised); } /* WebKit/Blink meter styling */ meter::-webkit-meter-bar { background: var(--color-surface-raised); border-radius: var(--radius-full); border: none; } meter::-webkit-meter-optimum-value { background: oklch(60% 0.18 145); /* green */ } meter::-webkit-meter-suboptimum-value { background: oklch(75% 0.18 75); /* yellow */ } meter::-webkit-meter-even-less-good-value { background: oklch(55% 0.2 25); /* red */ } /* Size variants */ meter.xs { block-size: var(--size-3xs); } meter.s { block-size: var(--size-2xs); } meter.m { block-size: var(--size-s); } meter.l { block-size: var(--size-m); } /* Segmented meter */ meter.segmented { background: repeating-linear-gradient( 90deg, var(--color-surface-raised), var(--color-surface-raised) 9%, var(--color-surface) 9%, var(--color-surface) 10% ); }

Related Elements

  • progress - For task completion (loading, uploading)
  • output - Display calculated values
  • label - Label for the meter