Meter

Meter describes a current measurement in a known range; it does not measure progress toward completion. Use native <meter> when its built-in semantics and visual presentation work for your application.

Live demo

Installation and imports

pnpm quartz add meter

import {
  MeterDirective,
  MeterTrackDirective,
  MeterIndicatorDirective,
} from '@quartz-headless/primitives';

Accessible usage

<div qzMeter [value]="storageUsed" [min]="0" [max]="100" aria-label="Storage used">
  <div qzMeterTrack><div qzMeterIndicator></div></div>
</div>

The root exposes role="meter", aria-valuemin, aria-valuemax, a clamped aria-valuenow, and optional aria-valuetext. Non-finite bounds use 0/100 defaults; invalid ranges become [min, min + 1], with 0/100 as a safe fallback if that would overflow; non-finite values use the minimum. Dynamic inputs update immediately. Provide a name with aria-label or aria-labelledby. Meter has no keyboard behavior. Styling hooks are --qz-meter-percent, data-qz-value, and data-qz-part. Keep initial values stable across SSR and hydration. CLI source-copy usage is pnpm quartz add meter; see the API reference for inputs.