Meter

A graphical display of a numeric value within a range.

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:

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.

Track

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

Indicator

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

Value

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

Label

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