Meter

A graphical display of a numeric value within a range.

Storage Used

import * as React from 'react';
import { Meter } from '@base-ui-components/react/meter';
import styles from './index.module.css';

export default function ExampleMeter() {
  return (
    <Meter.Root className={styles.Meter} value={24}>
      <Meter.Label className={styles.Label}>Storage Used</Meter.Label>
      <Meter.Value className={styles.Value} />
      <Meter.Track className={styles.Track}>
        <Meter.Indicator className={styles.Indicator} />
      </Meter.Track>
    </Meter.Root>
  );
}

API reference

Import the component and assemble its parts:

Anatomy

import { Meter } from '@base-ui-components/react/meter';

<Meter.Root>
  <Meter.Label />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
  <Meter.Value />
</Meter.Root>

Root

Groups all parts of the meter and provides the value for screen readers. Renders a <div> element.

Prop	Type	Default
`value`	`number`	`undefined`
`getAriaValueText`	`((formattedValue: string, value: number) => string)`	`undefined`
`locale`	`LocalesArgument`	`undefined`
`min`	`number`	`0`
`max`	`number`	`100`
`format`	`NumberFormatOptions`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Track

Contains the meter indicator and represents the entire range of the meter. Renders a <div> element.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Indicator

Visualizes the position of the value along the range. Renders a <div> element.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Value

A text element displaying the current value. Renders a <span> element.

Prop	Type	Default
`children`	`\| ((formattedValue: string, value: number) => ReactNode) \| null`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Label

An accessible label for the meter. Renders a <span> element.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`