Meter

import { Flex } from "@hel/ui/flex"
import { Meter, MeterBar, MeterLabel, MeterValue } from "@hel/ui/meter"

When to use it#

Use a meter for a value that is already known, and that sits somewhere between a minimum and a maximum: storage used, seats in use, a score, a budget spent. It is a still picture of "how much".

A meter is not for something that is happening. For the completion of a task that is running, such as an upload, use a Progress bar. They look the same, but they mean different things to screen readers, and a meter never shows an unknown state.

Import#

Copyimport { Meter, MeterBar, MeterLabel, MeterValue } from "@hel/ui/meter"

Anatomy#

Meter holds the value and the range. MeterBar is the bar. MeterLabel and MeterValue are optional. They are the name and the number, and you place them where you like, usually in a row above the bar.

Copy<Meter value={64} className="w-72">
  <Flex justify="between" align="center" className="w-full">
    <MeterLabel>Storage used</MeterLabel>
    <MeterValue />
  </Flex>
  <MeterBar />
</Meter>

The meter is as wide as its container, so give it a width with className. MeterValue shows the value as a percentage of the range by default. When you leave the label out, give the meter an aria-label, so a screen reader can name it.

Examples#

Range and text#

min and max set the range, and they do not have to be 0 and 100. The bar fills to where the value sits between them. MeterValue takes a function as its children to write the text itself, as "720 of 850" is written here. It receives the formatted value and the number.

MeterBar has two sizes, sm, the default, and lg.

import { Flex } from "@hel/ui/flex"
import { Meter, MeterBar, MeterLabel, MeterValue } from "@hel/ui/meter"
import { Stack } from "@hel/ui/stack"

Props#

Meter#

It also takes every prop of the Base UI meter.

MeterBar#