Meter

Read-only gauge for a value within a range — storage, quotas, scores. Prefer Progress for task completion.

Examples

Storage

Storage used

Custom format

Bandwidth

Overview

Meter shows where a number sits between min and max. Compose label, value, track, and indicator under the root. Built on Base UI for accessible meter semantics.

tsx

import {
  Meter,
  MeterLabel,
  MeterValue,
  MeterTrack,
  MeterIndicator,
} from "@standard-ui/react"

<Meter value={72}>
  <MeterLabel>Storage used</MeterLabel>
  <MeterValue />
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>

Usage

Range

Pass value with optional min / max. Format via Intl options when units matter.

tsx

<Meter
  value={3.2}
  min={0}
  max={5}
  format={{ style: "unit", unit: "gigabyte" }}
>

Meter vs progress

Use Meter for static measurements (quota filled). Use Progress when work is advancing toward completion.

API

Part	Role
Meter	Root value, min, max, and format.
MeterLabel	Accessible name for the measurement.
MeterValue	Formatted current value.
MeterTrack	Background bar for the full range.
MeterIndicator	Filled portion reflecting the value.

Prop	Type	Default	Description
value	number	—	Current measurement.
min	number	0	Lower bound of the range.
max	number	100	Upper bound of the range.

Guidelines

Do

Label what is being measured
Show the numeric value when the exact figure matters
Pick min/max that match the real domain

Don't

Don't use Meter for indeterminate loading
Don't animate as if work is progressing — use Progress
Don't omit units when the scale is not obvious