Actions

Meter

A fully styleable gauge for a measurement within a known range.

When to use it: Use it for usage levels such as storage, battery, or password strength.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Storage used

64 GB of 100 GB

Meter.tsxtsx

import { Label } from "@comp0/react";
import { Meter } from "@comp0/react";

export function Example() {
  return (
    <div className="flex max-w-xs flex-col gap-2">
      <Label
        id="storage-meter-label"
        className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100"
      >
        Storage used
      </Label>
      <Meter
        id="storage-meter"
        value={64}
        min={0}
        max={100}
        low={50}
        high={85}
        optimum={25}
        aria-labelledby="storage-meter-label"
        className="h-3 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
      >
        <span className="block h-full w-[calc(var(--comp0-meter-value)*100%)] rounded-full bg-teal-700 transition-[width] dark:bg-teal-400" />
      </Meter>
      <p className="text-base text-zinc-600 tabular-nums sm:text-sm dark:text-zinc-400">
        64 GB of 100 GB
      </p>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Meter
Styleable div with meter semantics and an optional custom fill. Owns a DOM element.

Step by step

1
Add the main part
Add Meter where the measurement belongs and pass value with min and max.
2
Add the supporting parts
Name it with a wired Label or an aria-label.
3
Make the behavior clear
Add your own fill inside Meter and size it with --comp0-meter-value; low, high, and optimum remain available as data attributes.
Exampletsx
```
<Meter aria-label="Storage used" value={64} min={0} max={100} low={50} high={85}><span className="fill" /></Meter>
```

Keyboard

Forms and accessibility

No form behavior; a meter reports a measurement and submits nothing.

Accessibility checklist

Always name the gauge with a Label or an aria-label.
Show the measurement as visible text, not only as a colored bar.
Use ProgressBar instead when the value represents task completion.

API reference

Importtsx

import { Meter } from "@comp0/react";

`Meter`

DOM element

Styleable div with meter semantics and an optional custom fill.

Prop	Type	Description
`value`	`number`	Current measurement between min and max.
`min / max`	`number`	Range bounds; defaults are 0 and 1.
`low / high / optimum`	`number`	Thresholds exposed as data-low, data-high, and data-optimum for custom styling.
`children`	`ReactNode \| (state: MeterState) => ReactNode`	Custom track contents or a render function receiving value, bounds, and percentage.
`aria-label`	`string`	Names the gauge when it is not labelled by visible text.
`aria-labelledby`	`string`	Points to the visible text that names the gauge.
`aria-valuetext`	`string`	Explains the value when the number alone is not meaningful, such as “64 GB used”.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

--comp0-meter-value on Meter: Normalized 0–1 value for sizing a custom fill.
[data-low] on Meter: The low threshold was provided.
[data-high] on Meter: The high threshold was provided.
[data-optimum] on Meter: The optimum value was provided.

Keep exploring

Progress Bar