Meter

A meter represents a quantity within a known range, or a fractional value.

Theme

Storage25%

value

formatOptions

valueLabel

Example

Meter.tsx

Meter.css

Example

Meter.tsx

Meter.css

import {Meter} from './Meter';

<Meter label="Storage" value={25} />

Value

By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.

Data usage250 MB

minValue

maxValue

<Meter
  label="Data usage"
  maxValue={500}
  value={250}
  formatOptions={{style: "unit", unit: "megabyte"}} />

<Meter>
  <Label />
</Meter>

A meter represents a quantity within a known range, or a fractional value.

Name	Type	Default
`valueLabel`	`ReactNode`	Default: —
The content to display as the value's label (e.g. 1 of 4).
`value`	`number`	Default: `0`
The current value (controlled).
`children`	`ChildrenOrFunction<MeterRenderProps>`	Default: —
The children of the component. A function may be provided to alter the children based on component state.

`formatOptions`	`Intl.NumberFormatOptions`	Default: `{style: 'percent'}`
The display format of the value label.

Default className: react-aria-Meter

Render Prop	CSS Selector
`percentage`	CSS Selector: `—`
The value as a percentage between the minimum and maximum.
`valueText`	CSS Selector: `[aria-valuetext]`
A formatted version of the value.