Meter

A graphical display of a numeric value within a range.

Base UI React 1.8.0

Storage Used

FineSoft Stencil

Storage Used

react-meter.tsx stencil-meter.tsx index.module.css

import { Meter } from '@base-ui/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>
  );
}

The Stencil example uses the built-in Base UI theme; no CSS import is required. Set data-fs-theme="base-ui" on an ancestor to apply it without component classes. Label and Value expose ::part(label) and ::part(value) for custom text styling; CSS variables control the theme’s colors, typography, size, and spacing. Root keeps the meter role and layout on its public host, with its assistive text inside Shadow DOM. Track and Indicator keep their layout hosts so percentage widths, inherited track height, and width transitions continue to work. Consumer slot content remains public.

Anatomy

Import the component and assemble its parts:

Anatomy

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

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

API reference

Root

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

value^*number—

Name: value
Description: The current value.
Type: number

aria-valuetextstring—

Name: aria-valuetext
Description: A string value that provides a user-friendly name for aria-valuenow, the current value of the meter.
Type: string | undefined

getAriaValueTextfunction—

Name: getAriaValueText
Description: A function that returns a string value that provides a human-readable text alternative for aria-valuenow, the current value of the meter.
Type: | ((formattedValue: string, value: number) => string) | undefined

localeIntl.LocalesArgument—

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.
Type: Intl.LocalesArgument | undefined

minnumber0

Name: min
Description: The minimum value
Type: number | undefined
Default: 0

maxnumber100

Name: max
Description: The maximum value
Type: number | undefined
Default: 100

formatIntl.NumberFormatOptions—

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Meter.Root.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Meter.Root.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Meter.Root.State, ) => ReactElement) | undefined

Meter.Root.PropsHide

Re-Export of Root props as MeterRootProps

Meter.Root.StateHide

type MeterRootState = {}

Track

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

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Meter.Track.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Meter.Track.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Meter.Track.State, ) => ReactElement) | undefined

Meter.Track.PropsHide

Re-Export of Track props as MeterTrackProps

Meter.Track.StateHide

type MeterTrackState = {}

Indicator

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

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Meter.Indicator.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Meter.Indicator.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Meter.Indicator.State, ) => ReactElement) | undefined

Meter.Indicator.PropsHide

Re-Export of Indicator props as MeterIndicatorProps

Meter.Indicator.StateHide

type MeterIndicatorState = {}

Value

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

children

| ((formattedValue: string, value: number) => React.ReactNode) 
|  null

—

Name: children
Type: | (( formattedValue: string, value: number, ) => React.ReactNode) | null | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Meter.Value.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Meter.Value.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Meter.Value.State, ) => ReactElement) | undefined

Meter.Value.PropsHide

Re-Export of Value props as MeterValueProps

Meter.Value.StateHide

type MeterValueState = {}

Label

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

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Meter.Label.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Meter.Label.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Meter.Label.State, ) => ReactElement) | undefined

Meter.Label.PropsHide

Re-Export of Label props as MeterLabelProps

Meter.Label.StateHide

type MeterLabelState = {}